JS 實現回到頂部

2022-03-21 05:12:58 字數 779 閱讀 6507

js === 實現點選回到頂部

樣式:body // 產生滾動條

.go-2-top // 模擬點選div的時候回到頂部 最初隱藏,滾動一定距離顯示

結構:js: 

var backtop = document.getelementbyid("back-top") //獲取到div 物件

// onscroll 事件 ====》在元素滾動條在滾動時觸發。

window.onscroll = function ()else , 16)

// 在回到頂部的過程時候,滑鼠滾輪動的時候,滾動會暫停

// 新增乙個滑鼠滾輪事件

window.onmousewheel = function (){

clearinterval(id);  // *****== 這個時候會涉及到上面標註的要注意id的位置,最開始的時候 把他寫在了函式體裡面,到這裡的時候就獲取不到了。

學習要點總結 :

1. 事件:

onscroll 滾動事件

onmousewheel 滑鼠滾輪事件

2. 間隔函式

setinterval() == 兩個引數,一是執行的函式 二是間隔的時間

清除間隔函式

clearinterval(識別符號)

3.scrolltop 相容問題

document.documentelement.scrolltop ? document.documentelement.scrolltop : document.body.scrolltop;

4.作用域

JS 回到頂部

對於內容超出螢幕很多的內容,有個回到頂部的按鈕還是很人性化的 html header header div div span id go 回到頂部 span jsvar gotop document.getelementbyid go window.onscroll function else go...

純js實現回到頂部按鈕

目前很多 的頁面上在右下角都提供了乙個 回到頂部 的按鈕。今天無事決定自己寫乙個,其實很簡單,經過幾次修改後,效果還算滿意。重要的是全部使用js來實現,不需要在html css中增加任何內容,甚至都不需要,只要引用js即可。而且全面相容ie6。由於考慮相容性問題,如何獲取滾動條的高度和按鈕停留在右下...

JS 回到頂部按鈕的實現

很多頁面都有乙個回到頂部的按鈕,一旦點選頁面的scrollbar就會變為0 只需要document.body.scrolltop document.documentelement.scrolltop 0,在這個基礎上在加乙個緩動公式。下面貼上我的 html 1 div class content 2...