首頁 > web前端 > js教程 > javascript scrollTop正解使用方法_基礎知識

javascript scrollTop正解使用方法_基礎知識

WBOY
發布: 2016-05-16 17:15:23
原創
998 人瀏覽過

javascript scrollTop 取得捲軸相對於其頂部的偏移(如製作自動顯示隱藏的「返回頂部」按鈕)。在實際應用上常會遇到以下問題:
document.documentElement.scrollTop在Chrome裡總為0

1、各各各瀏覽器下window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差異
示例:

複製代碼 程式碼如下:

window.scroll(0,100)
console.log(“window.pageYOffset:” window.pageYOffset)
console.log(“document.document:document.document) ” document.documentElement.scrollTop)
console.log(“document.body.scrollTop:” document.body.scrollTop)

IE6/7/8:


IE6/7/8:
doc >window.pageYOffset:undefined

document.documentElement.scrollTop:100

document.body.scrollTop:0

無doctype:
window.pageYOffset:undefined
document.documentElement.scrollTop:0
document.body.scrollTop:100
Safari/Chrome:document.documentElement.scrollTop:0

document.body.scrollTop:100

Firefox/Opera:


doctype:
window.pageYOffset:100
document.documentElement.scrollTop:100

document.body.scrollTop:0


無doctype:
window.pageYOffset:100
document.documentElement.scrollTop:0

document.body.scrollTop:100


2、取得scrollTop值

完美的取得scrollTop 賦值簡寫:

var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板