网页点击回顶部一
一、锚链接
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，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。
如果没有提供该参数，默认为true
1 <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>
