JS 實現返回頂部的效果 百分百可以!!!

2021-09-19 17:46:24 字數 1194 閱讀 5705

小夥伴們平常去瀏覽網頁可能都發現,滾動到一定程度都會出現返回頂部的按鈕,方便使用者來一鍵返回,從而來提高使用者的體驗感。今天我們來講下如何實現。

我這裡列出了兩種方法,第一種是使用timeout()方法實現,模擬動畫形式返回頂部,也是體驗感最好的一種,但缺點就會損耗一些效能。

第二種是瞬間返回頂部的,繫結事件,設定滾動條的位置畫素,單擊一下馬上到達頂部,速度很快,缺點就是體驗感有點差,因為沒有返回的過程,是瞬間到達頂部的。

"cbtn"

>

href="

" id

="returntop"

onclick

="returntop();return false;"

>

返回頂部a

>

div>

class

="aa"

>

你好啊!

div>

class

="aa"

>

你好啊!

div>

class

="aa"

>

你好啊!

div>

class

="aa"

>

你好啊!

div>

class

="aa"

>

你好啊!

div>

class

="aa"

>

你好啊!

div>

window.

onload

=function()

);}// 返回頂部隱藏顯示方法

function

hiddenbtn()

else

}// 返回頂部方法

function

returntop()

}/** 瞬間返回頂部,沒有動畫效果

*/// 給返回按鈕繫結單擊事件

function

topfunction()

.aa

#cbtn

#cbtn a

具體的作用,我也在**中打上注釋,實現原理很簡單,希望能幫助到你。

打造百分百成功 逐鹿的企業E化宣言

打造百分百成功 逐鹿的企業e化宣言 記者在接觸逐鹿系統整合 蘇州 guru 副總鄭正中博士之前對逐鹿的了解還很淺顯,只知道它是明基集團旗下一家企業e化解決方案和資訊服務提供商,曾經成功完成了明基集團全球營運資訊系統的規劃和建設。儘管逐鹿已有四年多的歷史,但它在外界特別是業內的影響並不大。如此低調的姿...

戀愛百分百 五十條經典的愛情觀

1.不要為了寂寞去戀愛,時間是個魔鬼,天長日久,如果你是個多情的人,即使不愛對方,到時候也會產生感情,最後你怎麼辦?2.不要為了負責而去結婚。要知道,不愛對方卻和對方結婚是最不負責的。即使當時讓對方很傷心,但是總比讓他幾年甚至一輩子傷心強。3.不管多大多老,不管家人朋友怎麼催,都不要隨便對待婚姻,婚...

JQuery實現的HTML可聯動的百分比進度條

最近需要乙個html可以聯動的百分比進度條,網上找了一下沒有,自己手動實現了乙個。需要解決的問題,ab兩個進度條需要按照百分比a b 100 a進度條可以拖動,b進度條聯動,並且有進度顏色的變化。實現功能如下 html css percentage container percentage cont...