1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .toTop{ 8 width: 40px; 9 height: 40px; 10 background: pink; 11 font-size: 14px; 12 text-align: center; 13 color: #fff; 14 position: fixed; 15 right:100px; 16 bottom:100px; 17 cursor: pointer; 18 display: none; 19 } 20 body{ 21 height: 2000px; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="toTop">回到顶部</div> 27 <script type="text/javascript" src="js/jquery-1.10.1.js"></script> 28 <script type="text/javascript"> 29 // 滚动距离超过首屏之后再显示 回到顶部按钮 小于这个距离 还要接着隐藏 30 $top=$('.toTop') 31 // document.onscroll=function(){ 32 // var pageHight=document.documentElement.clientHeight; 33 // var scrollHight=$('html,body').scrollTop(); 34 // if(scrollHight>pageHight){ 35 // $top.show() 36 // }else{ 37 // $top.hide() 38 // } 39 // } 40 41 //纯jq写法 42 $(window).scroll(function(){ 43 var pageHight= $(window).height();// $(window)，视口的高度 44 console.log(pageHight) 45 var scrollhight=$('html,body').scrollTop() 46 if(scrollhight>pageHight){ 47 $top.show() 48 }else{ 49 $top.hide() 50 } 51 52 }) 53 54 55 $(function () { 56 // 动画总时长 57 var time = 3000; 58 // 动画帧时长 总时长/帧时长 = 总帧数（步数） 59 var itemTime = 30; 60 61 // 回到顶部 给按钮绑定单击事件 62 $('.toTop').click(function () { 63 // 获取总偏移（当前页面滚动条的坐标） 64 var offset = $('html').scrollTop() + $('body').scrollTop(); 65 // 单次偏移 总偏移 / 总帧数(就是动画总时长 / 帧时长) 66 var itemOffset = offset / ( time / itemTime ); 67 68 // 启动定时器 时间为帧时长 在定时器内 每一次减掉一个单次偏移 69 var timer = setInterval(function () { 70 offset -= itemOffset; 71 // 滚动条到达顶部之后 清除定时器 72 if(offset <= 0){ 73 clearInterval(timer); 74 // 修正滚动条位置 这一步可以省略 75 // $('html,body').scrollTop(0); 76 offset=0; 77 } 78 // 设置滚动条的坐标 79 $('html,body').scrollTop(offset); 80 },itemTime) 81 }) 82 }) 83 </script> 84 </body> 85 </html>