首页 > 代码库 > js返回顶部效果
js返回顶部效果
当用户浏览的网页过于长的时候，用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部，不仅麻烦，而且用户体验也会很差。现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮，点击它可以使页面返回顶部，用户再也不用滚动滚轮了。下面我总结了集中常用的返回顶部的效果：
方法一（最简单，代码量最少，但是效果有些生硬）、代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>返回顶部</title> 6 <style> 7 #btn{width: 50px;height: 50px;background: gray;} 8 </style> 9 </head> 10 <body> 11 <div id="box"> 12 <p>111111111111111111</p> 13 <p>111111111111111111</p> 14 <p>111111111111111111</p> 15 <p>111111111111111111</p> 16 <p>111111111111111111</p> 17 <p>111111111111111111</p> 18 <p>111111111111111111</p> 19 <p>111111111111111111</p> 20 <p>111111111111111111</p> 21 <p>111111111111111111</p> 22 <p>111111111111111111</p> 23 <p>111111111111111111</p> 24 <p>111111111111111111</p> 25 <p>111111111111111111</p> 26 <p>111111111111111111</p> 27 <p>111111111111111111</p> 28 <p>111111111111111111</p> 29 <p>111111111111111111</p> 30 <p>111111111111111111</p> 31 <p>111111111111111111</p> 32 <p>111111111111111111</p> 33 <p>111111111111111111</p> 34 <p>111111111111111111</p> 35 <p>111111111111111111</p> 36 <p>111111111111111111</p> 37 <p>111111111111111111</p> 38 <p>111111111111111111</p> 39 <p>111111111111111111</p> 40 <p>111111111111111111</p> 41 <p>111111111111111111</p> 42 <p>111111111111111111</p> 43 <p>111111111111111111</p> 44 <p>111111111111111111</p> 45 <p>111111111111111111</p> 46 <p>111111111111111111</p> 47 <p>111111111111111111</p> 48 <p>111111111111111111</p> 49 <p>111111111111111111</p> 50 <p>111111111111111111</p> 51 <p>111111111111111111</p> 52 <p>111111111111111111</p> 53 <p>111111111111111111</p> 54 <p>111111111111111111</p> 55 <p>111111111111111111</p> 56 <p>111111111111111111</p> 57 <p>111111111111111111</p> 58 <p>111111111111111111</p> 59 <p>111111111111111111</p> 60 <p>111111111111111111</p> 61 <p>111111111111111111</p> 62 <p>111111111111111111</p> 63 <p>111111111111111111</p> 64 <p>111111111111111111</p> 65 <p>111111111111111111</p> 66 <p>111111111111111111</p> 67 <p>111111111111111111</p> 68 <p>111111111111111111</p> 69 <p>111111111111111111</p> 70 <p>111111111111111111</p> 71 <p>111111111111111111</p> 72 <p>111111111111111111</p> 73 <p>111111111111111111</p> 74 <p>111111111111111111</p> 75 <p>111111111111111111</p> 76 <p>111111111111111111</p> 77 <p>111111111111111111</p> 78 <p>111111111111111111</p> 79 <p>111111111111111111</p> 80 <p>111111111111111111</p> 81 <p>111111111111111111</p> 82 <p>111111111111111111</p> 83 <p>111111111111111111</p> 84 <p>111111111111111111</p> 85 </div> 86 <button id="btn">返回顶部</button> 87 </body> 88 <script> 89 var btn = document.getElementById(‘btn‘); 90 btn.onclick = function(){ 91 window.scrollTo(0,0);// 在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置(如果没有滚动条，页面不会发生任何变化) 92 } 93 </script> 94 </html>
方法二：代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>返回顶部</title> 6 <style> 7 #btn{width: 50px;height: 50px;background: gray;} 8 </style> 9 </head> 10 <body> 11 <div id="box"> 12 <p>111111111111111111</p> 13 <p>111111111111111111</p> 14 <p>111111111111111111</p> 15 <p>111111111111111111</p> 16 <p>111111111111111111</p> 17 <p>111111111111111111</p> 18 <p>111111111111111111</p> 19 <p>111111111111111111</p> 20 <p>111111111111111111</p> 21 <p>111111111111111111</p> 22 <p>111111111111111111</p> 23 <p>111111111111111111</p> 24 <p>111111111111111111</p> 25 <p>111111111111111111</p> 26 <p>111111111111111111</p> 27 <p>111111111111111111</p> 28 <p>111111111111111111</p> 29 <p>111111111111111111</p> 30 <p>111111111111111111</p> 31 <p>111111111111111111</p> 32 <p>111111111111111111</p> 33 <p>111111111111111111</p> 34 <p>111111111111111111</p> 35 <p>111111111111111111</p> 36 <p>111111111111111111</p> 37 <p>111111111111111111</p> 38 <p>111111111111111111</p> 39 <p>111111111111111111</p> 40 <p>111111111111111111</p> 41 <p>111111111111111111</p> 42 <p>111111111111111111</p> 43 <p>111111111111111111</p> 44 <p>111111111111111111</p> 45 <p>111111111111111111</p> 46 <p>111111111111111111</p> 47 <p>111111111111111111</p> 48 <p>111111111111111111</p> 49 <p>111111111111111111</p> 50 <p>111111111111111111</p> 51 <p>111111111111111111</p> 52 <p>111111111111111111</p> 53 <p>111111111111111111</p> 54 <p>111111111111111111</p> 55 <p>111111111111111111</p> 56 <p>111111111111111111</p> 57 <p>111111111111111111</p> 58 <p>111111111111111111</p> 59 <p>111111111111111111</p> 60 <p>111111111111111111</p> 61 <p>111111111111111111</p> 62 <p>111111111111111111</p> 63 <p>111111111111111111</p> 64 <p>111111111111111111</p> 65 <p>111111111111111111</p> 66 <p>111111111111111111</p> 67 <p>111111111111111111</p> 68 <p>111111111111111111</p> 69 <p>111111111111111111</p> 70 <p>111111111111111111</p> 71 <p>111111111111111111</p> 72 <p>111111111111111111</p> 73 <p>111111111111111111</p> 74 <p>111111111111111111</p> 75 <p>111111111111111111</p> 76 <p>111111111111111111</p> 77 <p>111111111111111111</p> 78 <p>111111111111111111</p> 79 <p>111111111111111111</p> 80 <p>111111111111111111</p> 81 <p>111111111111111111</p> 82 <p>111111111111111111</p> 83 <p>111111111111111111</p> 84 <p>111111111111111111</p> 85 </div> 86 <button id="btn">返回顶部</button> 87 </body> 88 <script> 89 var btn = document.getElementById(‘btn‘); 90 var scrollTop ; 91 var timer = null; 92 window.onscroll = function(){ 93 scrollTop = document.documentElement.scrollTop||document.body.scrollTop;//兼容性写法，并且在滚动事件内可以实时获得滚动条距顶部的距离 94 //console.log(scrollTop) 95 return scrollTop; 96 } 97 btn.onclick = function(){ 98 clearInterval(timer); 99 // var now = scrollTop; 100 // var speed = (0-now)/10; 101 // speed = speed>0?Math.ceil(speed):Math.floor(speed); 102 timer = setInterval(function(){ 103 var now = scrollTop; 104 var speed = (0-now)/10; 105 speed = speed>0?Math.ceil(speed):Math.floor(speed);//这三步设置是定时器里面可以使速度动态变化，达到有缓冲的效果，如果房子定时器外面的话，返回顶部的速度是匀速的。 106 107 if(scrollTop==0){ 108 clearInterval(timer); 109 } 110 document.documentElement.scrollTop = scrollTop + speed; 111 document.body.scrollTop = scrollTop + speed; 112 113 },30) 114 115 } 116 </script> 117 </html>
方法三（利用jQuery，代码量少，而且带有动画效果）：代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>返回顶部</title> 6 <script src="jquery-1.4.min.js"></script> 7 <style> 8 #btn{width: 50px;height: 50px;background: gray;} 9 </style> 10 </head> 11 <body> 12 <div id="box"> 13 <p>111111111111111111</p> 14 <p>111111111111111111</p> 15 <p>111111111111111111</p> 16 <p>111111111111111111</p> 17 <p>111111111111111111</p> 18 <p>111111111111111111</p> 19 <p>111111111111111111</p> 20 <p>111111111111111111</p> 21 <p>111111111111111111</p> 22 <p>111111111111111111</p> 23 <p>111111111111111111</p> 24 <p>111111111111111111</p> 25 <p>111111111111111111</p> 26 <p>111111111111111111</p> 27 <p>111111111111111111</p> 28 <p>111111111111111111</p> 29 <p>111111111111111111</p> 30 <p>111111111111111111</p> 31 <p>111111111111111111</p> 32 <p>111111111111111111</p> 33 <p>111111111111111111</p> 34 <p>111111111111111111</p> 35 <p>111111111111111111</p> 36 <p>111111111111111111</p> 37 <p>111111111111111111</p> 38 <p>111111111111111111</p> 39 <p>111111111111111111</p> 40 <p>111111111111111111</p> 41 <p>111111111111111111</p> 42 <p>111111111111111111</p> 43 <p>111111111111111111</p> 44 <p>111111111111111111</p> 45 <p>111111111111111111</p> 46 <p>111111111111111111</p> 47 <p>111111111111111111</p> 48 <p>111111111111111111</p> 49 <p>111111111111111111</p> 50 <p>111111111111111111</p> 51 <p>111111111111111111</p> 52 <p>111111111111111111</p> 53 <p>111111111111111111</p> 54 <p>111111111111111111</p> 55 <p>111111111111111111</p> 56 <p>111111111111111111</p> 57 <p>111111111111111111</p> 58 <p>111111111111111111</p> 59 <p>111111111111111111</p> 60 <p>111111111111111111</p> 61 <p>111111111111111111</p> 62 <p>111111111111111111</p> 63 <p>111111111111111111</p> 64 <p>111111111111111111</p> 65 <p>111111111111111111</p> 66 <p>111111111111111111</p> 67 <p>111111111111111111</p> 68 <p>111111111111111111</p> 69 <p>111111111111111111</p> 70 <p>111111111111111111</p> 71 <p>111111111111111111</p> 72 <p>111111111111111111</p> 73 <p>111111111111111111</p> 74 <p>111111111111111111</p> 75 <p>111111111111111111</p> 76 <p>111111111111111111</p> 77 <p>111111111111111111</p> 78 <p>111111111111111111</p> 79 <p>111111111111111111</p> 80 <p>111111111111111111</p> 81 <p>111111111111111111</p> 82 <p>111111111111111111</p> 83 <p>111111111111111111</p> 84 <p>111111111111111111</p> 85 <p>111111111111111111</p> 86 </div> 87 <button id="btn">返回顶部</button> 88 </body> 89 <script> 90 var btn = document.getElementById(‘btn‘); 91 // var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;//兼容性写法，并且在滚动事件内可以实时获得滚动条距顶部的距离 ; 92 93 btn.onclick = function(){ 94 95 $(‘body,html‘).animate({scrollTop:0},300) 96 97 } 98 </script> 99 </html>
以上总结若有错误，欢迎指正！
js返回顶部效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。