一般的網站都有個回到頂部，回到頂部又有多種方法可以實現，

方法1：

在css中添加

html {scroll-behavior: smooth; }

然后在回到頂部按鈕上加一個a標簽，herf屬性寫頂部標簽的id即可。

例如： <a href="#top"><div id="one">點我回到頂部</div> </a>

這樣就可以很平滑地回到頂部。不需要用到JavaScript，速度是均勻的，并且不是很快。

方法2：

可以在回到頂部按鈕上加一個點擊事件：

document.querySelector('回到頂部按鈕').onclick = () => { scrollTo(0, 0) }

這樣就可以了。只不過這樣是瞬間登頂。

function smoothScrollToTop() {window.scrollTo({left: 0,top: 0,behavior: 'smooth'}) } document.getElementById('回到頂部按鈕').onclick = smoothScrollToTop;

寫成這樣就可以達到和方法1一樣的效果。

-----------------------------------

方法3：

HTML5有一個api，可以將指定的元素滑動到頁面的可視區域中來。

element.scrollIntoView({behavior: 'auto | smooth | auto(default)',block: 'start | center | end | nearest (default)' })

可以設置成點擊回到頂部按鈕就把頁面最上面的那個元素滑動到window的可視區域，元素的頂部與窗口頂部對齊。這樣也可以達到目的。

（本質上其實和方法1沒什么區別）

function smoothScrollToTop() {document.getElementById("top").scrollIntoView({ block: "start", behavior: "smooth" }) } document.getElementById("scrollToTopButton").onclick = smoothScrollToTop; //top就是最頂部元素地id，scrollToTopButton就是回到頂部按鈕地id

-----------------------------------

既然要模仿知乎的回到頂部，自然就需要用到JavaScript了。知乎的回到頂部是變速的，剛開始很快，而后越來越慢，最后一幀非常慢。猜測是每次往前移動一定的比例。

方法4：

可以用scrollTo()函數來模擬，一次性scrollTo(0,0)是瞬間移動，那么多scrollTo()幾次，每次往上移動一定的比例就可以做出。

先用 window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop 獲取當前頁面回到頂部需要滑動的高度。然后使用scrollTo()函數滑動到高一點的某個地方。

屏幕的刷新率一般是60hz，那就每一秒鐘調用scrollTo()函數60次吧。經過多次調試，每次往上滑動當前高度的大約15%最接近知乎回到頂部的實際效果。

//setInterval版 function smoothScrollToTop() {let smoothScrollToTopSetInterval = setInterval(() => {let Y_TopValve = (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);if (Y_TopValve > 1) {scrollTo(0, Math.floor(Y_TopValve * 0.85));} else {scrollTo(0, 0);clearInterval(smoothScrollToTopSetInterval);}}, 1000 / 60) }document.getElementById('回到頂部按鈕').onclick = smoothScrollToTop;

鑒于setInterval經常被詬病，在頁面卡死時可能出一些奇怪的問題，那就改造一下，改成setTimeout。

//setTimeout版 function fnScroll() {let Y_TopValve = (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);if (Y_TopValve > 1) {scrollTo(0, Math.floor(Y_TopValve * 0.85));} else {scrollTo(0, 0);} } function smoothScrollToTop() {setTimeout(() => {fnScroll();let Y_TopValve = (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);if (Y_TopValve > 0) {smoothScrollToTop();}}, 1000 / 60); } document.getElementById('回到頂部按鈕').onclick = smoothScrollToTop; 實際效果https://www.zhihu.com/video/1189228293793099776

但是用setTimeout還是可能會被工頭罵，怎么辦？

那就只好搬出requestAnimationFrame這個api了。

方法5：

用requestAnimationFrame改造一下方法4，

function smoothScrollToTop() {let Y_TopValve = (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);if (Y_TopValve > 1) {window.requestAnimationFrame(smoothScrollToTop);scrollTo(0, Math.floor(Y_TopValve * 0.85));} else {scrollTo(0, 0);} } document.getElementById('回到頂部按鈕').onclick = smoothScrollToTop;

完結撒花！

總結

以上是生活随笔為你收集整理的浏览器 刷新页面后回到顶部_JavaScript仿知乎回到顶部功能的全部內容，希望文章能夠幫你解決所遇到的問題。

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