`

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(),当窗口滑动时触发

 

 

 

.

分享到:
评论

相关推荐

    jquery滚动到顶部底部.zip

    jquery滚动到顶部底部是一款简单的滚动到顶部底部控制jQuery插件。是一个很实用的功能,他能帮助新手和高级开发者们创造美好的用户体验。 jquery滚动到顶部底部仅向上效果: 点击查看演示: jquery滚动到顶部...

    网页模板——jQuery实现滚动到网站页面底部动画弹出对话框.zip

    3. **页面底部检测**:要判断用户是否滚动到底部,通常会用到`$(document).height()`(文档总高度)和`$(window).height()`(视口高度)以及`$(window).scrollTop()`(滚动条顶部距离文档顶部的距离)。如果`$...

    jQuery滚动到顶部和底部的动态特效代码.rar

    jQuery滚动到顶部和底部的动态特效代码,在页面底部的左侧有两个箭头,一个是向上,一个是向下,点击相应的箭头,会将页面往对应的方向平滑滚动,比如向上的话,可滚动至页面的顶部,有缓冲的效果,了解缓冲效果的...

    js返回顶部/底部demo Jquery返回顶部/底部案例

    使用jQuery库,我们可以监听滚动事件,并在用户滚动到一定位置时显示或隐藏返回顶部/底部的按钮。以下是一个简单的示例: ```javascript $(document).ready(function() { $(window).scroll(function() { if ($...

    jQuery无限滚动加载图片瀑布流代码

    无限滚动是一种用户滚动页面到底部时自动加载更多内容的网页设计技术。这种设计模式通常与Ajax一起使用,当用户接近页面底部时,通过Ajax请求后台数据并动态添加到页面中,这样用户就可以无感知地浏览更多内容。 ##...

    浅析jquery如何判断滚动条滚到页面底部并执行事件

    本篇文章将深入探讨如何使用jQuery来判断滚动条是否滚动到页面底部,并在此基础上执行特定的事件。首先,我们需要了解三个关键的DOM元素属性:clientHeight、offsetHeight和scrollTop。 1. **clientHeight**: ...

    jQuery实现滚动到底部时自动加载更多的方法示例

    在网页开发中,有时我们需要实现一个功能,当用户滚动页面到底部时,自动加载更多内容,这被称为“无限滚动”或“滚动加载”。这个功能在社交媒体、新闻网站和电子商务平台等场景非常常见,能提高用户体验,减少用户...

    jQuery判断网页是否已经滚动到浏览器底部的实现方法

    笔者在这里介绍如何使用Jquery判断用户是否已经浏览到网页的底部了。 在了解下面的知识点之前,笔者这里先介绍几个概念。 $(window).height(); //用于获取浏览器显示区域的高度 $(window).width(); //用于获取浏览器...

    jquery滚动到顶部底部代码

    在网页设计中,提供一个简单易用的滚动到顶部或底部的控制功能是提升用户体验的重要方式之一。jQuery库因其简洁的API和丰富的功能,成为实现此类功能的理想选择。本篇文章将详细讲解如何使用jQuery实现滚动到顶部和...

    页面滚动到底部自动加载数据

    JQuery的`$(window).scroll()`事件监听用户的滚动行为,`$(document).height()`获取文档总高度,`$(window).height()`获取窗口可视区域高度,以及`$(window).scrollTop()`获取滚动条距离顶部的距离,这些方法共同...

    jQuery无缝滚动

    它通过监听滚动事件,当用户滚动到页面底部或顶部时,自动加载新的内容,从而创造出无限滚动的效果。这种技术常见于新闻网站、社交媒体 feed 和产品展示等场景。 ## 2. 使用jQuery实现无缝滚动的关键步骤 ### 2.1 ...

    JQuery检测滚动条距离顶部百分比.zip

    当元素达到设定的滚动位置时,它会自动变为固定在视口的顶部或底部,直到滚动回到特定位置才会恢复原状。 在实际应用中,为了提高用户体验,我们可能还需要考虑一些优化策略,例如使用`throttle`或`debounce`函数来...

    jQuery无缝滚动原理分析

    当用户到达容器的底部或顶部时,JavaScript会触发一个事件,将最前面或最后面的子元素移动到容器的另一端,从而实现视觉上的无缝连接。 4. **动画效果**:jQuery的`.animate()`方法可以用来创建平滑的过渡动画,让...

    jQuery返回顶部跟底部浮窗代码.zip

    【jQuery返回顶部跟底部浮窗代码】是一种常见的网页交互元素,用于提高用户体验。在网页滚动时,用户可以方便地点击这个浮动窗口中的按钮,快速回到页面的顶部或底部。这种设计常见于长页面,比如博客文章、产品...

    实现返回顶部和底部的Jquery特效

    本文将详细探讨如何使用JQuery实现返回顶部和底部的特效。 首先,我们需要在HTML文档中添加必要的结构。为了实现返回顶部的按钮,可以在页面底部添加一个锚点元素,例如: ```html <a id="top"></a> 返回顶部 ``` ...

    jquery随页面滚动最终固定顶部的导航条插件

    标题中的“jquery随页面滚动最终固定顶部的导航条插件”指的是一个基于jQuery的JavaScript插件,该插件实现了一种交互效果:当用户在网页上滚动时,导航条会从页面底部开始移动,随着页面的向下滚动逐渐靠近顶部,...

    jQuery鼠标滚动条到页面底部浮动层滑动弹出信息

    当判断条件满足,即滚动到底部时,显示浮动层。可以通过改变CSS的`display`属性实现: ```javascript $('#floatingLayer').show(); ``` 或者使用动画效果增加用户体验: ```javascript $('#floatingLayer')....

    最少代码jquery滚动到scrollto插件

    这个最简单的jquery滚动到插件你灵活运用一下就有多种玩法,比如,可以做出 滚动到顶部、滚动到中部、滚动到底部、滚动要任意位置。你是要做的就是那个需要点击的导航链接中的 date-scroll="#scrollto1" 和那个要...

    jquery循环滚动插件

    - **滚动公告**:在网站顶部或底部展示不断滚动的信息。 - **侧边栏广告**:自动滚动的广告条,提高广告的曝光率。 - **滚动菜单**:当内容过多时,自动滚动的菜单可以让用户看到所有选项。 **3. 使用方法** 首先...

    jQuery全屏页面滚动效果页面上下滚动效果代码jq插件

    如果页面内容被分成了多个部分(通常每个部分占据一屏幕的高度),那么我们可以通过比较滚动位置与每个部分的顶部或底部坐标来决定显示哪个部分。 为了创建平滑的滚动效果,可以使用`$.animate()`函数,它可以实现...

Global site tag (gtag.js) - Google Analytics