js隱藏與顯示回到頂部按鈕及window.onscroll事件應(yīng)用
更新時(shí)間：2013年01月25日 15:12:35 作者：
現(xiàn)在大多數(shù)網(wǎng)站都會(huì)添加這種功能：當(dāng)滾動(dòng)條滾動(dòng)到頁(yè)面的下方時(shí)，頁(yè)面的右下角會(huì)顯示出來(lái)一個(gè)“回到頂部”的按鈕或連接;那么，如何控制“回到頂部”按鈕的顯示或隱藏呢;本文介紹詳細(xì)實(shí)現(xiàn)方法，感興趣的你可不要走開(kāi)哦
現(xiàn)在大多數(shù)網(wǎng)站都會(huì)添加這種功能：當(dāng)滾動(dòng)條滾動(dòng)到頁(yè)面的下方時(shí)，頁(yè)面的右下角會(huì)顯示出來(lái)一個(gè)“回到頂部”的按鈕或連接，點(diǎn)擊該按鈕后頁(yè)面會(huì)跳轉(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 為頁(yè)面上“回到頂部”的容器（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 為頁(yè)面上“回到頂部”的容器（div標(biāo)簽）
相關(guān)文章
webpack 開(kāi)發(fā)和生產(chǎn)并行設(shè)置的方法
這篇文章主要介紹了webpack 開(kāi)發(fā)和生產(chǎn)并行設(shè)置的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
javascript 原型與原型鏈的理解及應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript 原型與原型鏈的理解及應(yīng)用,結(jié)合實(shí)例形式分析了javascript原型與原型鏈的具體原理、功能、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
本文主要介紹了用原生js做單頁(yè)應(yīng)用的相關(guān)知識(shí)。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
JS或jQuery獲取ASP.NET服務(wù)器控件ID的方法
這篇文章主要介紹了JS或jQuery獲取ASP.NET服務(wù)器控件ID的方法,本文介紹一方法,解決如何使用js獲取ASP.NET控件在瀏覽器端生成html標(biāo)簽對(duì)應(yīng)的id,需要的朋友可以參考下2015-06-06
JS實(shí)現(xiàn)動(dòng)態(tài)星空背景效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)動(dòng)態(tài)星空背景效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
JavaScript重復(fù)元素處理方法分析【統(tǒng)計(jì)個(gè)數(shù)、計(jì)算、去重復(fù)等】
這篇文章主要介紹了JavaScript重復(fù)元素處理方法,結(jié)合實(shí)例形式分析了javascript針對(duì)字符串、數(shù)組中重復(fù)元素的個(gè)數(shù)統(tǒng)計(jì),計(jì)算及去重復(fù)等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
關(guān)于在IE下的一個(gè)安全BUG --可用于跟蹤用戶(hù)的系統(tǒng)鼠標(biāo)位置
本篇文章小編將為大家介紹，關(guān)于在IE下的一個(gè)安全BUG --可用于跟蹤用戶(hù)的系統(tǒng)鼠標(biāo)位置。需要的朋友可以參考一下2013-04-04
阻止子元素繼承父元素事件具體思路及實(shí)現(xiàn)
想要阻止點(diǎn)擊#p_cont區(qū)域時(shí)觸發(fā)a事件，需要在#p_cont區(qū)域內(nèi)加入阻止事件冒泡的代碼，具體實(shí)現(xiàn)祥看本文，希望對(duì)你有所幫助2013-05-05
這篇文章主要為大家介紹了SVG快速構(gòu)建馬賽克效果示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
本篇文章主要介紹了js彈窗返回值(window.open方式)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01