DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js隱藏與顯示回到頂部按鈕及window.onscroll事件應用
js隱藏與顯示回到頂部按鈕及window.onscroll事件應用
編輯:關於JavaScript     
現在大多數網站都會添加這種功能:當滾動條滾動到頁面的下方時,頁面的右下角會顯示出來一個“回到頂部”的按鈕或連接,點擊該按鈕後頁面會跳轉到頂部,或某一個適合查看內容的位置。

那麼,如何控制“回到頂部”按鈕的顯示或隱藏呢?其實我們只需要實現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標簽)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved