回到頂部的五種方法

一、錨點跳轉

說明：為a標簽的href屬性可以鏈接id屬性實現頁內跳轉，為頂部元素設置一個id屬性即可。

代碼如下：

<div class="header" id="header">這是頂部 </div> <div class="btn"> <a href="#header">回到頂部</a></div> <div class="footer">這是頁腳 </div>

二、element.scrollTop

說明：element.scrollTop返回當前視圖中的實際元素頂部邊緣與頂部邊緣的距離，即當前顯示element被瀏覽器擋住部分的高度，設置為0就可以回到頂部。

代碼如下：

<div class="header" id="header">這是頂部 </div> <div class="btn"> <a href="#">回到頂部</a></div> <div class="footer">這是頁腳 </div> <script>document.getElementsByClassName('btn')[0].onclick = function () {document.body.scrollTop = document.documentElement.scrollTop = 0;} </script>

三、window.scrollTo

說明：把內容滾到指定坐標，參數x(必須)，指定的x坐標，參數與y(必須)，指定的y坐標，設置window.scrollTo(0,0)可以回到頂部。

代碼如下：

<div class="header" id="header">這是頂部 </div> <div class="btn"> <a href="javascript:;">回到頂部</a></div> <div class="footer">這是頁腳 </div> <script>document.getElementsByClassName('btn')[0].onclick = function () {// document.body.scrollTop = document.documentElement.scrollTop = 0;window.scrollTo(0,0)} </script>

四、window.scrollBy()

說明：可把內容滾動指定的像素數；參數，xnum(必選)，把文檔向右滾動的像素數，ynum(必選)，把文檔向下滾動的像素數。只需把ynum設為負數，即可回到頂部。

代碼如下：

<div class="header" id="header"> 這是頂部 </div> <div class="btn"> <a href="javascript:;">回到頂部</a></div> <div class="footer">這是頁腳 </div> <script>document.getElementsByClassName('btn')[0].onclick = function () {// document.body.scrollTop = document.documentElement.scrollTop = 0;// window.scrollTo(0,0)var top = document.body.scrollTop || document.documentElement.scrollTopwindow.scrollBy(0,-top)} </script>

五、element.scrollIntoView()

說明：讓當前的元素滾動到瀏覽器窗口的可視區域內。參數，Boolean（可選，默認為true），為true時，元素的頂端將和其所在滾動區的可視區域的頂端對齊；為false時，元素的底端將和其所在滾動區的可視區域的底端對齊。

代碼如下：

<div class="header" id="header">這是頂部 </div> <div class="btn"> <a href="javascript:;">回到頂部</a></div> <div class="footer">這是頁腳 </div> <script>document.getElementsByClassName('btn')[0].onclick = function () {// document.body.scrollTop = document.documentElement.scrollTop = 0;// window.scrollTo(0,0)// var top = document.body.scrollTop || document.documentElement.scrollTop// window.scrollBy(0,-top)document.getElementById('header').scrollIntoView()} </script>

總結

以上是生活随笔為你收集整理的页面回到顶部的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。