1.實現有許多種方法，原理是監聽頁面高度實現滾動。

一、使用錨點

1）使用默認鏈接錨點，設置a鏈接的href屬性值為"#top"即可實現
? ? <div><a href=" ">返回頂部</a ></div>

2）href指向特定的id
<div id=“element1”>元素1</div>
<a href=“#element1”>回到元素1</a >

二、scrollTop屬性:

元素未滾動時，scrollTop的值為0，如果元素被垂直滾動了，scrollTop的值大于0，且表示元素上方不可見內容的像素寬度

document.body.scrollTop = document.documentElement.scrollTop = 0

三、scrollTo(0,0)方法:

參數為坐標點，（x,y）—坐標點
坐標x和y指定的點位于顯示區域的左上角

四、scrollBy(dx,dy)方法：參數為距離 ?dx—表示水平距離，dy-表示垂直距離
var top = document.body.scrollTop || document.documentElement.scrollTop
scrollBy(0,-top)

參考文章：JS中offsetTop、clientTop、scrollTop、offsetTop各位置屬性詳解（含示例圖）_zh_rey的博客-CSDN博客_js offsettop這里是javascript中制作滾動代碼的常用屬性頁可見區域寬： document.body.clientWidth;網頁可見區域高： document.body.clientHeight;window.innerHeight;網頁可見區域寬： document.body.offsetWidth?? (包括邊線的寬);網頁可見區域高： document.body.offhttps://blog.csdn.net/zh_rey/article/details/78967174

2.js實現，動態返回頂部效果

<style>p {width: 100px;height: 50px;background: tomato;}div {width: 100px;height: 30px;background: yellowgreen;color: white;text-align: center;line-height: 30px;position: fixed; /*使用固定定位*/bottom: 50px;right: 50px;} </style><p>1</p> <p>2</p>... <p id="special">12</p>... <p>40</p> <div id="toTop">back to top</div><script>var toTop = document.querySelector("#toTop"); toTop.style.display = "none";// 一開始div隱藏 window.addEventListener("scroll", scrollHandler);// 然后給window加事件監聽，滾動條大于某個值時，div出現function scrollHandler(e) { var distanceY = document.documentElement.scrollTop || document.body.scrollTop;//兼容寫法，獲取當前頁面y軸的滾動距離if (distanceY > 50) {toTop.style.display = "block";} else {toTop.style.display = "none";}}// 然后給div添加點擊事件，用計時器interval來循環，步長為5，scrollTop依次減5，時間每50ms循環一次，直到scrollTop為0清除計時器toTop.addEventListener("click", clickHandler);function clickHandler(e) {let timer = setInterval(function () {var distanceY = document.documentElement.scrollTop || document.body.scrollTop;//兼容if (distanceY == 0){clearInterval(timer);return;} var speed = Math.ceil(distanceY/16);//speed這個值從高變低，那么scrollTop就減得從快到慢，上回到頂部的速度就先快后慢document.documentElement.scrollTop=distanceY-speed;// document.documentElement.scrollTop=distanceY-5;//如果給速度一個確定的值，那回到頂部的就勻速}, 16);}</script>

思路：為window綁定scroll事件，監聽頁面滾動距離，當超過一屏高度時，顯示返回頂部的按鈕。

???為按鈕綁定點擊事件，返回頂部的方法就是獲取頁面滾動的距離，然后計算步長，這里采用滾動距離除以16的方式，滾動速度由快到慢。這里使用定時器控制滾動的頻率，建議設置較小一點的值，如果時間間隔過大會有‘跳幀’的感覺。
轉載：

總結

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

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