【前言】
最近讲到了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(),当窗口滑动时触发
.
相关推荐
jquery滚动到顶部底部是一款简单的滚动到顶部底部控制jQuery插件。是一个很实用的功能,他能帮助新手和高级开发者们创造美好的用户体验。 jquery滚动到顶部底部仅向上效果: 点击查看演示: jquery滚动到顶部...
jQuery滚动到顶部和底部的动态特效代码,在页面底部的左侧有两个箭头,一个是向上,一个是向下,点击相应的箭头,会将页面往对应的方向平滑滚动,比如向上的话,可滚动至页面的顶部,有缓冲的效果,了解缓冲效果的...
笔者在这里介绍如何使用Jquery判断用户是否已经浏览到网页的底部了。 在了解下面的知识点之前,笔者这里先介绍几个概念。 $(window).height(); //用于获取浏览器显示区域的高度 $(window).width(); //用于获取浏览器...
JQuery检测滚动条距离顶部百分比是一款检测滚动条距离顶部的高度插件,页面滚动到滚动条底部为0的时候会显示出隐藏的层。
jquery滚动到顶部底部是一款简单的滚动到顶部底部控制。是一个很实用的功能,他能帮助新手和高级开发者们创造美好的用户体验。这里推荐给大家,有需要的小伙伴可以参考下。
这个最简单的jquery滚动到插件你灵活运用一下就有多种玩法,比如,可以做出 滚动到顶部、滚动到中部、滚动到底部、滚动要任意位置。你是要做的就是那个需要点击的导航链接中的 date-scroll="#scrollto1" 和那个要...
一、jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数: $(document).height() 获取整个页面的高度 $(window).height() 获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放...
这是一款jQuery导航条插件。导航条刚开始的位置在页面底部,随着页面的向下滚动,导航条开始向上滚动,最终导航条停留在页面的顶部位置。
scrollUp 就是这样一款插件,它能够让用户滚动条滚动到一定的位置时(可设置),右下角出现“滚动到顶部”的按钮,点击后,页面就是慢慢的滚动到顶部,而不是硬生生的直接回到顶部,提高了用户体验。 scrollUp 还...
jquery滚动到顶部底部是一款简单的滚动到顶部底部控制jQuery插件。是一个很实用的功能,他能帮助新手和高级开发者们创造美好的用户体验。 jquery滚动到顶部底部仅向上效果: 点击查看演示:
主要介绍了jquery 判断滚动条到达了底部和到达顶端的方法,需要的朋友可以参考下
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果。分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
内容索引:脚本资源,jQuery,jQuery滚动插件,回到顶部 jQuery滚动到顶部和底部的动态特效代码,在页面底部的左侧有两个箭头,一个是向上,一个是向下,点击相应的箭头,会将页面往对应的方向平滑滚动,比如向上的话,...
采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上。 滚动到顶部: 代码如下:$(‘.scroll_top...
但当然滚动鼠标时,导航条或广告图片会自动紧贴顶部,当鼠标重新滚动到顶部时,则导航又恢复正常状态.从而实现固定浮动效果.================ 顶部浮动时,需要jquery的支持,注意引用.============== 共三个html文件,一...
很平滑的滚动 很不错的一个效果,当网页拉下的时候渐隐出现
实例如下: <!DOCTYPE ...<... <head>...jquery实现跳到底部,回到顶部效果的简单实例(类似锚)</title> <scri
JQuery检测滚动条距离顶部百分比是一款检测滚动条距离顶部的高度插件,页面滚动到滚动条底部为0的时候会显示出隐藏的层。