本文實例講述了jQuery實現判斷滾動條滾動到document底部的方法。分享給大家供大家參考，具體如下：
滾動條沒有實際的高度。只是為了呈現效果才在外型上面有長度。
在js當中也沒有提供滾動條的高度API。
參考了網上有關資料：判斷滾動條到底部的基本邏輯是滾動條滾動的高度加上視口的高度，正好是document的高度，公式表示為
滾動條滾動的高度+瀏覽器視口的高度>=document的高度。
參考網上資料，具體代碼如下：
//滾動條在Y軸上的滾動距離function getScrollTop() { var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; //兼容谷歌 if (document.body) { bodyScrollTop = document.body.scrollTop; } //兼容火狐 if (document.documentElement) { documentScrollTop = document.documentElement.scrollTop; } scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; return scrollTop;}//文檔的總高度function getScrollHeight() { var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0; //兼容谷歌 if (document.body) { bodyScrollHeight = document.body.scrollHeight; } //兼容火狐 if (document.documentElement) { documentScrollHeight = document.documentElement.scrollHeight; } scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight; return scrollHeight;}//瀏覽器視口的高度function getWindowHeight() { var windowHeight = 0; windowHeight = document.documentElement.clientHeight; return windowHeight;}window.onscroll = function() { if (getScrollTop() + getWindowHeight() == getScrollHeight()) { alert("you are in the bottom!"); }};jquery實現代碼：
$(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollTop + windowHeight == scrollHeight){ alert("you are in the bottom"); }});代碼測試有效果。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
