深入淺析JavaScript中的scrollTop
含義：滾動條高度
作用：滾動加載(ajax)，滾動導(dǎo)航固定定位，滾動彈框定位等等.
展示滾動導(dǎo)航和側(cè)邊欄滾動固定定位的效果:
1、chrome瀏覽器
document.body.scrollTop和document.documentElement.scrollTop都可以
2、各瀏覽器下 scrollTop的差異
IE6/7/8/9/10：
對于沒有doctype聲明的頁面里可以使用 document.body.scrollTop 來獲取 scrollTop高度 ；
對于有doctype聲明的頁面則可以使用 document.documentElement.scrollTop ；
Safari:
safari 比較特別，有自己獲取scrollTop的函數(shù) ： window.pageYOffset ；
Firefox:
火狐等等相對標準些的瀏覽器就省心多了，直接用
document.documentElement.scrollTop ；
3、獲取scrollTop值
完美的獲取scrollTop 賦值短語 ：
var scrollTop = document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;
ps：javascript中scrolltop用法的問題
document.documentElement.scrollTop指的是滾動條的垂直坐標
document.documentElement.clientHeight指的是瀏覽器可見區(qū)域高度
document.documentElement.clientHeight-oDiv是懸浮框的初始垂直坐標（相對于body的top值）（這個值是固定不變的）
但是當(dāng)你拉動滾動條的時候，懸浮框的垂直坐標（target）必須要在初始坐標的基礎(chǔ)上增減相應(yīng)的值才能獲得視覺上隨滾動條滾動的效果，而這個增減的值就是滾動條拉動的距離，即你這個scrollTop
下面給大家說下javascript中scrollTop和offsetTop有啥區(qū)別
scrollTop是指某個可滾動區(qū)塊向下滾動的距離，比如向下滾動了10個像素，那么這個元素的scrollTop屬性值就是10；
offsetTop則是元素的上邊框與父元素的上邊框的絕對距離。
兩者描述的不是同一個東西，所以沒有可比性。
以上所述是小編給大家介紹的JavaScript中的scrollTop的全部敘述，希望對大家有所幫助，如果大家想了解更多內(nèi)容，敬請關(guān)注腳本之家！
相關(guān)文章
JavaScript 實現(xiàn) Tab 點擊切換實例代碼
Tab 選項卡切換效果在現(xiàn)如今的網(wǎng)頁中，運用的也是比較多的，包括點擊切換、滑動切換、延遲切換、自動切換等多種效果，在這篇博文里，我們是通過原生 JavaScript 來實現(xiàn) Tab 點擊切換的效果。2017-03-03
這篇文章主要為大家詳細介紹了js實現(xiàn)點贊效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
應(yīng)用uni-app跨平臺框架進行項目開發(fā)過程中,需要實現(xiàn)版本更新時全頁面彈窗,底部導(dǎo)航欄無法點擊的效果,下面這篇文章主要給大家介紹了關(guān)于uniapp全局彈窗(APP端)的相關(guān)資料,需要的朋友可以參考下2022-10-10
在做html頁面開發(fā)時，經(jīng)常會使用到j(luò)s（javascript）來處理客戶端的邏輯，下面我們就來看一下，如何使用js來獲取頁面上的元素2019-05-05
定義一個id="flower"的div元素 并設(shè)置如上樣式,我們的目標就是通過javascript來獲取樣式的最終屬性2010-04-04
防止xss和sql注入:JS特殊字符過濾正則，需要的朋友可以參考一下2013-04-04
uniapp返回上一頁并實現(xiàn)刷新界面數(shù)據(jù)的完整代碼
從一個列表界面點擊新增按鈕,進入新增元素的界面,然后新增之后返回列表界面,并刷新列表界面,下面小編給大家分享uniapp返回上一頁,并實現(xiàn)刷新界面數(shù)據(jù)的代碼,感興趣的朋友跟隨小編一起看看吧2024-04-04
JSON+HTML實現(xiàn)國家省市聯(lián)動選擇效果
實現(xiàn)國家省市聯(lián)動的方法有很多，本文要為大家介紹的JSON+HTML如何實現(xiàn),需要的朋友可以參考下2014-05-05
JavaScript定義函數(shù)的三種實現(xiàn)方法
這篇文章主要介紹了JavaScript定義函數(shù)的三種實現(xiàn)方法的相關(guān)資料,希望通過本文大家能夠掌握三種定義函數(shù)的方法，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了layui.js實現(xiàn)的表單驗證功能,結(jié)合實例形式分析了基于layui.js的事件監(jiān)聽、驗證、判定等相關(guān)操作技巧,需要的朋友可以參考下2017-11-11