javascript中scrollTop詳解
scrollTop 表示滾動的高度，默認(rèn)從position:0;開始向下滾，scrollTop（offset）的offset表示相對頂部的偏移，以像素計(jì)，<br/>
scrollTop()滾動的高度既能‘設(shè)置'滾動值，也能‘獲取'滾動值。
當(dāng)設(shè)置滾動值時(shí)，該方法就會設(shè)置所有匹配元素的滾動值。
當(dāng)獲取滾動值時(shí)，該方法只返回第一個(gè)匹配元素的滾動位置。
需要獲取scrollTop的值，可以參考如下代碼：
var scrollTop = document.documentElement.scrollTop || window.pageYOfset ||document.body.scrollTop;
1、各瀏覽器下 scrollTop的差異
IE6/7/8：
對于沒有doctype聲明的頁面里可以使用 document.body.scrollTop 來獲取 scrollTop高度 ；
對于有doctype聲明的頁面則可以使用 document.documentElement.scrollTop；
Safari:
safari 比較特別，有自己獲取scrollTop的函數(shù) ： window.pageYOffset ；
Firefox:
火狐等等相對標(biāo)準(zhǔn)些的瀏覽器就省心多了，直接用 document.documentElement.scrollTop ；
2、獲取scrollTop值
完美的獲取scrollTop 賦值短語 ：
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
通過這句賦值就能在任何情況下獲得scrollTop 值。
仔細(xì)觀察這句賦值，你發(fā)現(xiàn)啥了沒？？
沒錯(cuò)， 就是 window.pageYOffset (Safari) 被放置在 || 的中間位置。
因?yàn)楫?dāng) 數(shù)字0 與 undefine 進(jìn)行 或運(yùn)算時(shí)，系統(tǒng)默認(rèn)返回最后一個(gè)值。即或運(yùn)算中 0 == undefine ;
當(dāng)頁面滾動條剛好在最頂端，即scrollTop值為 0 時(shí)。 IE 下 window.pageYOffset (Safari) 返回為 undefine ，此時(shí)將window.pageYOffset (Safari) 放在或運(yùn)算最后面時(shí)， scrollTop 返回 undefine , undefine 用在接下去的運(yùn)算就會報(bào)錯(cuò)咯。
而其他瀏覽器 無論 scrollTop 賦值或運(yùn)算順序如何都不會返回 undefine. 可以安全使用..
所以說到頭還是IE的問題咯. 杯具…
精神有點(diǎn)恍惚，不知道有沒有表達(dá)清楚。
不過最后總結(jié)出來這句實(shí)驗(yàn)過OK，大家放心使用；
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
DTD相關(guān)說明：
頁面具有 DTD，或者說指定了 DOCTYPE 時(shí)，使用 document.documentElement。
頁面不具有 DTD，或者說沒有指定了 DOCTYPE，時(shí)，使用 document.body。
在 IE 和 Firefox 中均是如此。
為了兼容，不管有沒有 DTD，可以使用如下代碼：
var scrollTop = window.pageYOffset //用于FF
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;
documentElement 和 body 相關(guān)說明：
body是DOM對象里的body子節(jié)點(diǎn)，即 <body> 標(biāo)簽；
documentElement 是整個(gè)節(jié)點(diǎn)樹的根節(jié)點(diǎn)root，即<html> 標(biāo)簽；
DOM把層次中的每一個(gè)對象都稱之為節(jié)點(diǎn)，就是一個(gè)層次結(jié)構(gòu)，你可以理解為一個(gè)樹形結(jié)構(gòu)，就像我們的目錄一樣，一個(gè)根目錄，根目錄下有子目錄，子目錄下還有子目錄。
以HTML超文本標(biāo)記語言為例：整個(gè)文檔的一個(gè)根就是,在DOM中可以使用document.documentElement來訪問它，它就是整個(gè)節(jié)點(diǎn)樹的根節(jié)點(diǎn)。而body是子節(jié)點(diǎn)，要訪問到body標(biāo)簽，在腳本中應(yīng)該寫：document.body。
如果你想點(diǎn)擊按鈕滾動到page頂部，使用jquery點(diǎn)擊執(zhí)行代碼$(document).scrollTop(0)就可以滾動到頂部了。
同樣的滾動位置scrollLeft表示往左邊滾動的位置。
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
- 深入淺析JavaScript中的scrollTop
- 解決js頁面滾動效果scrollTop在FireFox與Chrome瀏覽器間的兼容問題的方法
- JS中完美兼容各大瀏覽器的scrolltop方法
- javascript scrollTop正解使用方法
- js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差別介紹
- js中top、clientTop、scrollTop、offsetTop的區(qū)別 文字詳細(xì)說明版
- javascript的offset、client、scroll使用方法詳解
- js動態(tài)添加onload、onresize、onscroll事件(另類方法)
- js中scrollTop()方法和scroll()方法用法示例
相關(guān)文章
說到vant框架相信大家應(yīng)該并不陌生了吧,做過移動端開發(fā)的小伙伴們應(yīng)該都知道它吧,下面這篇文章主要給大家介紹了關(guān)于微信小程序中使用vant組件庫的超詳細(xì)圖文教程,需要的朋友可以參考下2023-03-03
調(diào)試代碼導(dǎo)致IE出錯(cuò)的避免方法
這篇文章主要介紹了避免調(diào)試代碼導(dǎo)致IE出錯(cuò)的方法,需要的朋友可以參考下2014-04-04
JavaScript時(shí)間對象之常用方法的設(shè)置實(shí)例
這篇文章主要為大家介紹了JavaScript時(shí)間對象常用方法的設(shè)置實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
JS實(shí)現(xiàn)的簡單表單驗(yàn)證功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡單表單驗(yàn)證功能,涉及javascript針對表單提交內(nèi)容的獲取、判斷、焦點(diǎn)設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
本文主要介紹了JavaScript寫的一個(gè)貪吃蛇游戲的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
JavaScript之filter_動力節(jié)點(diǎn)Java學(xué)院整理
filter也是一個(gè)常用的操作，它用于把Array的某些元素過濾掉，然后返回剩下的元素。下面通過實(shí)例代碼給大家簡答介紹下javascript中的filter，需要的的朋友參考下吧2017-06-06
JavaScript中的剩余參數(shù)一般使用在**賦值號右側(cè),或具有迭代屬性的數(shù)組、函數(shù)和對象,這篇文章主要為大家介紹了JavaScript中剩余參數(shù)的具體應(yīng)用,需要的可以參考下2023-11-11
javascript中2個(gè)感嘆號的用法實(shí)例詳解