JS 回到頂部按鈕的實現

2022-08-14 03:54:09 字數 2011 閱讀 1445

很多頁面都有乙個回到頂部的按鈕，一旦點選頁面的scrollbar就會變為0

只需要document.body.scrolltop = document.documentelement.scrolltop = 0,在這個基礎上在加乙個緩動公式。

下面貼上我的**

html:

1


<


div 


class


="content"


>


2         我是頂部<


br><


br>


3         我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>我不是頂部<


br>


4div


>


5<


input 


type


="button"


id="totop"


class


="totop"


value


="返回頂部↑"


>
html**

css:

1


.content


5.totop
css**

js**

1 window.addeventlistener("load",function


()else


14})


1516     totop.addeventlistener("click",function


())22


23})


2425


var timer = null;26


function


moveslowly(start,des,time)else


4445     },1)


46 }
效果展示：（移動滾動條後，右下角有個回到頂部的按鈕）

以上內容，如有錯誤請指出，不甚感激。

純js實現回到頂部按鈕

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

回到頂部按鈕

最近學習使用hexo搭建了乙個部落格，theme 使用的是geekman 在jakman基礎修改的乙個版本 在部落格中加入了回到頂部，偶然一次看到hexo 折騰筆記中的回到頂部的百分比樣式的按鈕效果，很炫酷，所以自己動手照著教程造了輪子，具體效果可進本人部落格檢視 idancy。這裡我主要針對自己的...

JS 實現回到頂部

js 實現點選回到頂部 樣式 body 產生滾動條 go 2 top 模擬點選div的時候回到頂部 最初隱藏，滾動一定距離顯示 結構 js var backtop document.getelementbyid back top 獲取到div 物件 onscroll 事件 在元素滾動條在滾動時觸發。...