建站
咨詢
售后
建站咨詢
新聞中心
jquery 判斷滾動條到達了底部，怎么判斷滾動條是否又到達的頂
$(document).scrollTop()
10年積累的網(wǎng)站制作、網(wǎng)站建設經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站設計后付款的網(wǎng)站建設流程，更有閬中免費網(wǎng)站建設讓你可以放心的選擇與我們合作。
獲取垂直滾動的距離
即當前滾動的地方的窗口頂端到整個頁面頂端的距離
$(document).scrollLeft()
這是獲取水平滾動條的距離
看明白了嗎？？
你要獲取頂端
只需要獲取到scrollTop()==0的時候
就是頂端了
要獲取底端
只要獲取scrollTop()=$(document).height()-$(window).height()
就可以知道已經(jīng)滾動到底端了
$(document).height()
//是獲取整個頁面的高度
$(window).height()
//是獲取當前
也就是你瀏覽器所能看到的頁面的那部分的高度
這個大小在你縮放瀏覽器窗口大小時
會改變
與document是不一樣的
根據(jù)英文應該也能理解吧
其實你可以自己做個實驗就知道了
$(document).scroll(function(){
$("#lb").text($(document).scrollTop());
})
span
id="lb"
style="top:100px;left:100px;position:fixed;"/span!--一個固定的span標記
滾動時方便查看--
如何用jQuery判斷div滾動到底部
判斷DIV是否滾動到底部代碼如下：
!DOCTYPE html
html
head
script src=""/script
script language="javascript"
$(document).ready(function (){
var nScrollHight = 0; //滾動距離總長(注意不是滾動條的長度)
var nScrollTop = 0; //滾動到的當前位置
var nDivHight = $("#div1").height();
$("#div1").scroll(function(){
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
if(nScrollTop + nDivHight = nScrollHight)
alert("滾動條到底部了");
});
});
/script
div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;"
div style="height:750px;"
/div
/div
/body
/html
jquery怎么判斷滾動條滾到頁面底部并執(zhí)行事件
首先理解三個dom元素，分別是：clientHeight、offsetHeight、scrollTop。
clientHeight：這個元素的高度，占用整個空間的高度，所以，如果一個div有滾動條，那個這個高度則是不包括滾動條沒顯示出來的下面部分的內(nèi)容。而只是單純的DIV的高度。
offsetHeight：是指元素內(nèi)容的高度。依照上面的，那這個高度呢就是DIV內(nèi)部的高度，包括可見部分及以滾動條下面的不可見部分。
scrollTop：這個是什么呢？他可以理解為滾動條可以滾動的長度。
舉例，如果一個DIV高度是400px（即clientHeight為400），而里面的內(nèi)容是一個很長的列表，內(nèi)容的高度是1000px（即offsetHeight為1000）。那么，可見部分我們看到400px，1000px的內(nèi)容中還有600px不可見。而這不可見的部分呢，正是我們通過拉動滾動條才能把這一部分顯示出來。你如果滾動條不拉動，此時scrollTop為0，如果你把滾動條拉到底，顯示出列表最下面的部分，此時，scrollTop為600。 所以scrollTop的取值區(qū)間為[0, 600]?！∷赃@個600可以理解為滾動條可以滾動的長度。
理解完上面的這個概念之后。要判斷是否滾動到底部就很好做了。
首先，我們拉動滾動條，從最上面拉到最下面，變化的是scrollTop的值，而這個值是有一個區(qū)間的。
這個區(qū)間是：[0, (offsetHeight - clientHeight)]
即，滾動條拉動的整個過程的變化在 0 到 (offsetHeight – clientHeight) 范圍之內(nèi)。
1、判斷滾動條滾動到最底端：scrollTop == (offsetHeight – clientHeight)
2、在滾動條距離底端50px以內(nèi)：(offsetHeight – clientHeight) – scrollTop = 50
3、在滾動條距離底端5%以內(nèi)：scrollTop / (offsetHeight – clientHeight) = 0.95
如上。
如果要實現(xiàn)拉到底部自動加載內(nèi)容。只要注冊個滾動條事件：
[javascript] view plain copy
在CODE上查看代碼片派生到我的代碼片
scrollBottomTest =function(){
$("#contain").scroll(function(){
var $this =$(this),
viewH =$(this).height(),//可見高度
contentH =$(this).get(0).scrollHeight,//內(nèi)容高度
scrollTop =$(this).scrollTop();//滾動高度
//if(contentH - viewH - scrollTop = 100) { //到達底部100px時,加載新內(nèi)容
if(scrollTop/(contentH -viewH)=0.95){ //到達底部100px時,加載新內(nèi)容
// 這里加載數(shù)據(jù)..
}
});
}
jquery如何讓滾動條滾動到最底部
jquery讓滾動條滾動到最底部的方法：
在ready方法里寫 $('#content').scrollTop( $('#content')[0].scrollHeight );
jquery 滾動條到底部執(zhí)行方法問題.
給你個思路：
1、獲取滾動事件；
2、判斷隱藏掉的第一個tr與它所在的索引；
3、計算第一個隱藏的tr離窗口頂部的距離；
4、當計算到的距離小于某個值(PS:此值自定義)時顯示此隱藏tr及其后的另外兩個tr
具體實現(xiàn)：
$(function(){
$("table tr:gt(2)").hide();
$(window).scroll(function(){
var firstHideTr = $("tr:hidden:first"); //隱藏掉的表格第一行
var index = $("table tr").index(firstHideTr); //判斷隱藏掉的表格第一行所在的索引值
if(firstHideTr.length0 ((firstHideTr.prev("tr").offset().top-$(window).scrollTop())300)){//此值300為自定義，根據(jù)實際情況而定
for(var i=0;i3;i++){//3為滾動時顯示的行數(shù)，可根據(jù)實際去定義
$("table tr").eq(index+i).show()
}
}
});
});
jquery如何讓滾動條默認在最底部？
使用如下代碼可讓滾動條默認在最底部：
$(document).ready(function(){
$("#submit").click(function(){
$("#info").append("admin:"+$("#talk").val()+"\n");
$("#info").scrollTop($("#info")[0].scrollHeight);
$("#talk").val("");
});
});
jQuery 里和滾動條有關的概念很多，但是有三個屬性和滾動條的拖動有關，就是：scrollTop、scrollLeft、scrollHeight。
1、可見高度：viewHeight,可以理解為打開見瀏覽器空白頁見到的空白區(qū)域的高度。
2、內(nèi)容高度：containHeight,這個就是我們關心的高度，它是內(nèi)容的總高度，包括隱藏在滾動條下面的內(nèi)容。
3、滾動的高度：scrollHeight,這個是滾動的高度，它是滾動條滾動了多少的意思。
代碼解說：
nScrollTop + nDivHight = nScrollHight。
程序中，在外部div的scroll（滾動）事件中偵測和執(zhí)行if判斷語句，是非常消耗CPU資源的。用鼠標拖拉滾動條，只要有一個像素的變動就會觸發(fā)該事件。但點擊滾動條兩頭的箭頭，事件觸發(fā)的頻率會低得多。所以滾動條的scroll事件要謹慎使用。
分享名稱：jquery滾動底部,jquery向上滑動
標題來源：http://www.dlmjj.cn/article/dsdcico.html
