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