首页 > 代码库 > jquery 返回顶部 兼容web移动
jquery 返回顶部 兼容web移动
返回顶部图片
http://hovertree.com/texiao/mobile/6/tophovertree.gif
具体实现代码
<span id="tophovertree" title="返回顶部"></span> <style type="text/css"> #tophovertree{display:block;position:fixed;width:36px;height:36px;right:20px;bottom:20px;cursor:pointer;background-image:url(images/newVersion201608/tophovertree.gif);opacity:0.9;display:none} </style> <script type="text/javascript"> $(function () { initTopHoverTree("tophov"+"ertree",500,30,20); }); /* 使用方法:initTopHoverTree("tophovertree",500,30,20); } tophovertree是返回顶部按钮的ID,500是返回顶部时间(毫秒),30是距离右边距离,20是距离底部距离*/ function initTopHoverTree(hvtid, times, right, bottom) { $("#" + hvtid).css("right", right).css("bottmo", bottom); $("#" + hvtid).on("click", function () { goTopHovetree(times); }) $(window).scroll(function () { if ($(window).scrollTop() > 268) { $("#" + hvtid).fadeIn(100); } else { $("#" + hvtid).fadeOut(100); } }); } //返回顶部动画 //goTop(500);//500ms内滚回顶部 function goTopHovetree(times) { if (!!!times) { $(window).scrollTop(0); return; } var sh = $(‘body‘).scrollTop();//移动总距离 var inter = 13.333;//ms,每次移动间隔时间 var forCount = Math.ceil(times / inter);//移动次数 var stepL = Math.ceil(sh / forCount);//移动步长 var timeId = null; function aniHovertree() { !!timeId && clearTimeout(timeId); timeId = null; //console.log($(‘body‘).scrollTop()); if ($(‘body‘).scrollTop() <= 0 || forCount <= 0) {//移动端判断次数好些,因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况 $(‘body‘).scrollTop(0); return; } forCount--; sh -= stepL; $(‘body‘).scrollTop(sh); timeId = setTimeout(function () { aniHovertree(); }, inter); } aniHovertree(); } </script>
jquery 返回顶部 兼容web移动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。