jQuery判断滚动到底部或顶部

【前言】

      最近讲到了jQuery，本文分享下jQuery判断滚动到底部或顶部

 

【主体】

      首先需要知道几个方法

      1、滚动条滚动的距离

      2、页面可见区域的高度

      3、整个HTML页面文档的高度

详解：

（1）滚动条滚动的距离

        $(window).scrollTop()和$(document).scrollTop()具有相同的效果，都为返回滚动条的垂直位置,但是$(window).scrollTop()被所有浏览器支持。所以建议以后用$(window).scrollTop()来获取滚动距离

（2）页面可见区域的高度

        $(window).height()

（3）整个HTML页面文档的高度

        $(document).height()

【案例】

        1、（滚动条距离+页面可见区域高度 = HTML页面文档高度），时刚好滑动到底部。但是出滑屏智能机后，手机页面有一个橡皮筋效果，所以滑动到底部后仍然可以继续往下滑。这时会出现（滚动条距离+页面可见区域高度 > HTML页面文档高度）。所以判断是否到底部的判断条件为

$(window).height() + $(window).scrollTop() >= $(document).height();

        2、判断是否到顶部

              $(window).scrollTop()为滚动条滑动距离，如果为0时表示滚动到了顶部。

$(window).scrollTop() == 0;

 

 

【小结】

（1）$(document)是获取文档对象 ；$(window)是获取窗口对象

（2）滚动事件为scoll()，语法为$(selector).scroll()，当窗口滑动时触发

 

 

 

.