網頁點擊回頂部一
阿新 • • 發佈：2017-09-08
col lin size 沒有 scroll top 鏈接 出現 參數
一、錨鏈接
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 functiontoTop(){ 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>
網頁點擊回頂部一