本文實例講述了js判斷滾動條是否已到頁面最底部或頂部的方法。分享給大家供大家參考。具體分析如下：
我們經常會看到很多的網站一個返回頂部效果就是當我們滾動條到指定位置時返回頂部出來了，否則就自動隱藏了，下面就來給大家介紹這種效果實現原理與方法。
當可視區域小於頁面的實際高度時，判定為出現滾動條，即：
復制代碼 代碼如下:if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true;
要使用 document.documentElement ，必須在頁面頭部加入聲明：
復制代碼 代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
其實，這段代碼是不起作用的，因為他沒考慮到一個問題，就是浏覽器的邊框，當我們在獲取頁面的offsetHeight高度時是包括了浏覽器的邊框的，浏覽器的邊框是2個像素，所以這時無論在任何情況下clientHeight 始終是小於offsetHeight的，這就使得即使沒有滾動條它也為true,因此我們要修正這個錯誤，代碼應該這樣改，在offsetHeight上減去4個像素，即：
復制代碼 代碼如下:if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){
//執行相關腳本。
}
還有，這裡要搞清楚，上面這代碼是判斷橫向滾動條的，我們一般要判斷的是縱向滾動，代碼如下：
復制代碼 代碼如下:if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){
//執行相關腳本。
}
判斷滾動條是否已拉到頁面最底部，可以用如下代碼
復制代碼 代碼如下:window.onscroll = function (){
var marginBot = 0;
if (document.documentElement.scrollTop){
marginBot = document.documentElement.scrollHeight – (document.documentElement.scrollTop+document.body.scrollTop)-document.documentElement.clientHeight;
} else {
marginBot = document.body.scrollHeight – document.body.scrollTop- document.body.clientHeight;
}
if(marginBot<=0) {
//do something
}
}
示例2
在網上找的。還挺兼容浏覽器的。奇怪的是我在文檔裡面沒找到相關信息。代碼貼出來吧。
復制代碼 代碼如下:/********************
* 取窗口滾動條高度
******************/
function getScrollTop()
{
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop)
{
scrollTop=document.documentElement.scrollTop;
}
else if(document.body)
{
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
/********************
* 取窗口可視范圍的高度
*******************/
function getClientHeight()
{
var clientHeight=0;
if(document.body.clientHeight&&document.documentElement.clientHeight)
{
var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}
else
{
var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}
return clientHeight;
}
/********************
* 取文檔內容實際高度
*******************/
function getScrollHeight()
{
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
function test(){
if (getScrollTop()+getClientHeight()==getScrollHeight()){
alert("到達底部");
}else{
alert("沒有到達底部");
}
}
補充：
DTD已聲明:
IE
document.documentElement.scrollHeight 浏覽器所有內容高度 ,document.body.scrollHeight 浏覽器所有內容高度
document.documentElement.scrollTop 浏覽器滾動部分高度，document.body.scrollTop 始終為0
document.documentElement.clientHeight 浏覽器可視部分高度，document.body.clientHeight 浏覽器所有內容高度
FF
document.documentElement.scrollHeight 浏覽器所有內容高度 ,document.body.scrollHeight 浏覽器所有內容高度
document.documentElement.scrollTop 浏覽器滾動部分高度，document.body.scrollTop 始終為0
document.documentElement.clientHeight 浏覽器可視部分高度，document.body.clientHeight 浏覽器所有內容高度
Chrome
document.documentElement.scrollHeight 浏覽器所有內容高度， document.body.scrollHeight 浏覽器所有內容高度
document.documentElement.scrollTop 始終為0，document.body.scrollTop 浏覽器滾動部分高度
document.documentElement.clientHeight 浏覽器可視部分高度，document.body.clientHeight 浏覽器所有內容高度
DTD未聲明:
IE
document.documentElement.scrollHeight 浏覽器可視部分高度，document.body.scrollHeight 浏覽器所有內容高度
document.documentElement.scrollTop 始終為0，document.body.scrollTop 浏覽器滾動部分高度
document.documentElement.clientHeight 始終為0，document.body.clientHeight 浏覽器可視部分高度
FF
document.documentElement.scrollHeight 浏覽器可視部分高度, document.body.scrollHeight 浏覽器所有內容高度
document.documentElement.scrollTop 始終為0，document.body.scrollTop 浏覽器滾動部分高度
document.documentElement.clientHeight 浏覽器所有內容高度，document.body.clientHeight 浏覽器可視部分高度
Chrome
document.documentElement.scrollHeight 浏覽器可視部分高度,document.body.scrollHeight 浏覽器所有內容高度
document.documentElement.scrollTop 始終為0，document.body.scrollTop 浏覽器滾動部分高度
document.documentElement.clientHeight 浏覽器所有內容高度，document.body.clientHeight 浏覽器可視部分高度
浏覽器所有內容高度即浏覽器整個框架的高度，包括滾動條卷去部分+可視部分+底部隱藏部分的高度總和
浏覽器滾動部分高度即滾動條卷去部分高度即可視頂端距離整個對象頂端的高度。
看懂了上面的參數我們就可以做出兼容ie,ff,chrome浏覽器的滾動效果了。
希望本文所述對大家的javascript程序設計有所幫助。