js隱藏與顯示回到頂部按鈕及window.onscroll事件應(yīng)用
更新時(shí)間：2013年01月25日 15:12:35 作者：
現(xiàn)在大多數(shù)網(wǎng)站都會添加這種功能：當(dāng)滾動條滾動到頁面的下方時(shí)，頁面的右下角會顯示出來一個(gè)“回到頂部”的按鈕或連接;那么，如何控制“回到頂部”按鈕的顯示或隱藏呢;本文介紹詳細(xì)實(shí)現(xiàn)方法，感興趣的你可不要走開哦
現(xiàn)在大多數(shù)網(wǎng)站都會添加這種功能：當(dāng)滾動條滾動到頁面的下方時(shí)，頁面的右下角會顯示出來一個(gè)“回到頂部”的按鈕或連接，點(diǎn)擊該按鈕后頁面會跳轉(zhuǎn)到頂部，或某一個(gè)適合查看內(nèi)容的位置。
那么，如何控制“回到頂部”按鈕的顯示或隱藏呢？其實(shí)我們只需要實(shí)現(xiàn)window.onscroll 事件即可，代碼如下：
window.onscroll = function () {
if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
document.getElementById("scrollto").style.display = "block";
}
else {
document.getElementById("scrollto").style.display = "none";
}
}
scrollto 為頁面上“回到頂部”的容器（div標(biāo)簽）
那么，如何控制“回到頂部”按鈕的顯示或隱藏呢？其實(shí)我們只需要實(shí)現(xiàn)window.onscroll 事件即可，代碼如下：
復(fù)制代碼 代碼如下:
window.onscroll = function () {
if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
document.getElementById("scrollto").style.display = "block";
}
else {
document.getElementById("scrollto").style.display = "none";
}
}
scrollto 為頁面上“回到頂部”的容器（div標(biāo)簽）
相關(guān)文章
主要介紹了一些xml dom對象的使用方法2008-08-08
js實(shí)現(xiàn)滑動觸屏事件監(jiān)聽的方法
這篇文章主要介紹了js實(shí)現(xiàn)滑動觸屏事件監(jiān)聽的方法,適用于手機(jī)端觸屏滑動事件的監(jiān)聽技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
JS實(shí)現(xiàn)的自定義右鍵菜單實(shí)例二則
這篇文章主要介紹了JS實(shí)現(xiàn)的自定義右鍵菜單,以兩則實(shí)例形式分析了javascript自定義右鍵菜單效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章介紹了頂部緩沖下拉菜單導(dǎo)航特效的JS代碼，有需要的朋友可以參考一下2013-08-08
javascript函數(shù)特點(diǎn)實(shí)例分析
這篇文章主要介紹了javascript函數(shù)特點(diǎn),實(shí)例分析了javascript函數(shù)傳遞參數(shù)及調(diào)用方法,需要的朋友可以參考下2015-05-05
JavaScript獲取當(dāng)前頁面上的指定對象示例代碼
這篇文章主要介紹了JavaScript獲取當(dāng)前頁面上指定對象的方法,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了谷歌瀏覽器調(diào)試JavaScript小技巧,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序動態(tài)增加按鈕組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
javascript設(shè)計(jì)模式之中介者模式學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之中介者模式學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)搜索框功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07