淺談jQuery頁面的滾動位置scrollTop、scrollLeft
更新時間：2015年05月19日 08:53:23 投稿：hebedich
官方文檔的解釋有點含糊，其實換個角度就很容易理解了，scrollTop獲取的是內(nèi)部元素超出外部容器的高度。
例如：$('window').scrollTop()獲取的就是當前這個頁面超出窗口最上端的高度，scrollLeft與此同理
Web頁面常常比顯示該頁面的瀏覽器窗口還要大，因為Web文檔具有很多內(nèi)容，往往會導致頁面比瀏覽器還要高，有時候甚至還要寬，這迫使訪問者通過滾動來查看整個頁面（如圖10-8所示）。當訪問者滾動頁面的時候，一部分文檔會從視線中消失。例如，Web頁面不能完全放入瀏覽器窗口中，文檔會向左或向上滾動，因此，頁面的頂部和左邊都會消失在視野之內(nèi)。這意味著瀏覽器窗口的左上角和文檔的左上角并不相同。如果試圖放置一個新元素，例如，屏幕頂部的一個動態(tài)Banner；而如果只是試圖將元素的left和top位置設(shè)置為0，將會遇到麻煩，你實際上只是將其放到了文檔的頂部，但是卻位于瀏覽器窗口之外。
幸運的是，jQuery提供了兩個函數(shù)，允許你確定從頂部和左邊滾動頁面的多少部分（換句話說，文檔的多少像素存在于瀏覽器窗口的上邊和左邊）。要確定文檔的多少部分在瀏覽器窗口之上，使用如下所示這行代碼：
復制代碼 代碼如下:
$（document）.scrollTop（）
要確定文檔的多少部分位于屏幕的左邊，使用如下所示這行代碼：
復制代碼 代碼如下:
$（document）.scrollLeft（）
這兩個函數(shù)都返回一個像素值，你可以用它來定位頁面上的另一個元素。例如，如果你想要將一個彈出窗口定位于頁面的中心，即便在某人向下滾動之后也是如此，那么，你需要確定訪問者滾動了多遠，并且移動彈出窗口，以使得很多額外元素位于頁面的下方。在彈出工具的提示的例子中，當訪問者已經(jīng)向下滾動一個頁面，要定位工具提示時，你需要小心：很容易意外地將工具提示放到頁面空間中，但是，卻在瀏覽器的視口中可見區(qū)域之外。使用scrollTop（）來避免將一個工具提示放在瀏覽器窗口頂部的可視區(qū)域之上。
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
這篇文章主要介紹了Jquery簡單分頁實現(xiàn)方法,實例分析了jquery分頁的相關(guān)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這里是本人學習jQuery Mobile的過程，現(xiàn)在將學習過程中的實例一一展現(xiàn)出來，希望能幫到更多的新手。本系列中實例都經(jīng)過了本人的親自測試。2016-01-01
jQuery EasyUI 提供易于使用的組件，它使 Web 開發(fā)人員能快速地在流行的 jQuery 核心和 HTML5 上建立程序頁面。通過本文給大家介紹JQuery+EasyUI輕松實現(xiàn)步驟條效果，需要的朋友參考下2016-02-02
下面是關(guān)于jquery異步跨域訪問的簡單實例，需要的朋友可以參考一下2013-06-06
本節(jié)主要介紹了jQuery提交多個表單的小技巧,需要的朋友可以參考下2014-07-07
本文通過實例代碼給大家介紹了jquery 與css相結(jié)合實現(xiàn)的下拉列表功能，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了JQuery實現(xiàn)的圖文自動輪播效果插件,涉及jQuery處理鼠標事件及動畫效果的方法,需要的朋友可以參考下2015-06-06
Ajax在Web應用中的作用越來越大，許多工具都包含了對這一功能的使用，以下是對這些常用工具中Ajax的典型實例.2016-06-06
在深入了解jQuery的各個細節(jié)之前，需要對jQuery的設(shè)計思想有一個大致的了解。在遇到問題時， 知道應該使用jQuery的哪一個功能，然后迅速從手冊中找到具體的用法。本文將詳細介紹jQuery的設(shè)計思想。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了jQuery中:image選擇器用法,實例分析了:image選擇器的功能、定義及匹配類型為image的<input>元素時的使用技巧,需要的朋友可以參考下2015-01-01