一、锚链接
1 <div id="box" style="height:2000px; background:red;"></div>2 <a href="#box" style="position:fixed; bottom:20px; right:20px;">回到顶部</a>
二、scrollTop
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
1 <div id="box" style="height:2000px;background:red;"></div> 2 <a href="javascript:void(0)" style="position: fixed;bottom:20px;right:20px;" onclick="toTop()">回到顶部</a> 3 </body> 4 <script> 5 ????function getscrolltop(){ 6 ????????var scrolltop=window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop; 7 ????????return ?scrolltop; 8 ????} 9 ????function toTop(){10 ????????var top=getscrolltop();11 ????????document.documentElement.scrollTop=document.body.scrollTop=0; ?//12 ????}13 </script>三、scrollTo
scrollTo() 方法可把内容滚动到指定的坐标
1 <body>2 <div id="box" style="height:2000px;background:red;"></div>3 <a href="javascript:void(0)" style="position: fixed;bottom:20px;right:20px;" onclick="toTop()">回到顶部</a>4 </body>5 <script>6 ???function toTop(){7 ????????scrollTo(0,0);8 ????}9 </script>四、scrollBy
scrollBy() 方法可把内容滚动指定的像素数 1 <body> 2 <div id="box" style="height:2000px;background:red;"></div> 3 <a href="javascript:void(0)" style="position: fixed;bottom:20px;right:20px;" onclick="toTop()">回到顶部</a> 4 </body> 5 <script> 6 ????function getscrolltop(){ 7 ????????var scrolltop=window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop; 8 ????????return ?scrolltop; 9 ????}10 ????function toTop(){11 ????????var top=getscrolltop()12 ????????scrollBy(0,-top)13 ????}14 </script>五、scrollIntoView
scrollIntoView() 滚动文档。使该元素出现在窗口的顶部或底部。该方法可以接受一个布尔值作为参数。
如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为true1 <body>2 <script>3 ????function toTop(){4 ????????box.scrollIntoView();5 ????}6 </script>7 <div id="box" style="height:2000px;background:red;"></div>8 <a href="javascript:void(0)" style="position: fixed;bottom:20px;right:20px;" onclick="toTop()">回到顶部</a>9 </body>网页点击回顶部一
原文地址：http://www.cnblogs.com/wangxiaozhu/p/7495225.html