jQuery頁面的滾動位置scrollTop、scrollLeft

jQuery頁面的滾動位置scrollTop、scrollLeft

 　　Web頁面常常比顯示該頁面的瀏覽器視窗還要大，因為Web文檔具有很多內容，往往會導致頁面比瀏覽器還要高，有時候甚至還要寬，這迫使訪問者通過滾動來查看整個頁面(10-8所示)。當訪問者滾動頁面的時候，一部分文檔會從視線中消失。例如，Web頁面不能完全放入瀏覽器視窗中，文檔會向左或向上滾動，因此，頁面的頂部和左邊都會消失在視野之內。這意味著瀏覽器視窗的左上方和文檔的左上方並不相同。如果試圖放置一個新元素，例如，螢幕頂部的一個動態Banner;而如果只是試圖將元素的left和top位置設定為0，將會遇到麻煩，你實際上只是將其放到了文檔的頂部，但是卻位於瀏覽器視窗之外。

　　幸運的是，jQuery提供了兩個函數，允許你確定從頂部和左邊滾動頁面的多少部分(換句話說，文檔的多少像素存在於瀏覽器視窗的上邊和左邊)。要確定文檔的多少部分在瀏覽器視窗之上，使用如下所示這行代碼：

　　 代碼如下:

　　$(document).scrollTop()

　　要確定文檔的多少部分位於螢幕的左邊，使用如下所示這行代碼：

　　 代碼如下:

　　$(document).scrollLeft()

　　這兩個函數都返回一個像素值，你可以用它來定位頁面上的另一個元素。例如，如果你想要將一個快顯視窗定位於頁面的中心，即便在某人向下滾動之後也是如此，那麼，你需要確定訪問者滾動了多遠，並且移動快顯視窗，以使得很多額外元素位於頁面的下方。在彈出工具的提示的例子中，當訪問者已經向下滾動一個頁面，要定位工具提示時，你需要小心：很容易意外地將工具提示放到頁面空間中，但是，卻在瀏覽器的視口中可見地區之外。使用scrollTop()來避免將一個工具提示放在瀏覽器視窗頂部的可視地區之上。

　　以上所述就是本文的全部內容了，希望大家能夠喜歡。