js返回顶部效果
Posted 上善若水
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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</以上是关于js返回顶部效果的主要内容，如果未能解决你的问题，请参考以下文章