小夥伴們平常去瀏覽網頁可能都發現,滾動到一定程度都會出現返回頂部的按鈕,方便使用者來一鍵返回,從而來提高使用者的體驗感。今天我們來講下如何實現。
我這裡列出了兩種方法,第一種是使用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...