js回到頂部

2021-10-09 11:28:24

1，使用瞄标記

使用HTML錨标記最簡單，就是看起來有點不好看，點選後會在位址欄顯示這個錨标記，其它的倒沒什麼。

頁面頂部放置：

放置位置在<body>标簽之後随便找個地方放都可以，隻要靠近頂部即可。

頁面底部放置：

使用

window.scrollTo(x,y) 絕對定位

window.scrollBy(dx,dy)相對定位

scrollTo(0,0)到最頂部

漸進式傳回頂部，要好看一些

回到頂部後，我們發現往下滾動時，頁面自動向上滾動，說明我們的pageScroll函數并沒有清除定時器。為什麼？

因為函數前面清除定時器後沒有return;後面的setTimeout又執行了。

加上return 或者把 if語句放在函數的後面就可以了。

clearTimeout()清除上個setTimeout的句柄。

window.clearTimeout(setTimeout("0")-1);

，setTimeout傳回的值似乎沒什麼規律，但緊挨着的兩個setTimeout()方法傳回值卻是有關系的，即相差1，是以

clearTimeout(setTimeout("0")-1)起作用。

當然clearTimeout(setTimeout("")-1)一樣起作用。

擷取頁面滾動的位置:

擷取頁面滾動的位置一般用window.pageXOffset，有些浏覽器用的是document.documentElement.scrollLeft，但是chrome的這個參數值恒為0.

傳回頂部功能做成了滑動效果。後來為了更貼合實體特征，改造做成了減速的滑動效果。

首先說一下原理吧，我們會擷取滾動條到頁面頂部的距離，然後上移一定的距離；再擷取滾動條到頁面頂部的距離，上移一定的距離（比上一次小一點）;以此類推 ...

繼續閱讀