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