`

jquery判断滚动条是否到达顶部或者底部

阅读更多
[size=medium]
var scroll_top = $(document).scrollTop(); //scroll_top是滚动条上部离文档顶部的高度
var doc_height = $(document).height();//doc_height是文档的高度
var window_height = $(window).height();//window_height表示窗口高度
[/size]

当 scroll_top = 0 时,表示滚动条已经到达窗口顶部。
当 scroll_top + window_height >= doc_height 时,表示滚动条已经到达窗口底部。


eg:实时监听滚动条是否到达顶部

  
 <script>
        $("document").ready(function () {
            ifTop();
            $(window).scroll(function () {
                ifTop();
            });
            function ifTop() {
                var scroll_top = $(document).scrollTop();
                if(scroll_top == 0){
                    console.log("顶部了.");
                }else {
                    console.log("没到顶部.");
                }
            }
        });
    </script>
分享到:
评论

相关推荐

    jQuery检测滚动条是否到达底部

    本文将详细讲解如何使用jQuery来检测滚动条是否到达底部。 首先,我们需要了解几个jQuery提供的获取页面和元素位置的函数: 1. `$(document).height()`:返回整个HTML文档的高度,包括不可见部分。 2. `$(window)....

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

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

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

    本教程将深入探讨“JQuery检测滚动条距离顶部百分比”的实现方法,这是一个常见的网页交互效果,用于感知用户滚动页面时的位置,通常用于创建如加载更多、固定导航栏等动态效果。 首先,我们需要了解jQuery中的`$...

    jquery 判断滚动条到达了底部和顶端的方法

    在处理页面中的滚动条时,jQuery可以用来判断滚动条是否到达了页面的底部或者顶端,这在动态加载内容的网页中尤其有用。 首先,我们需要了解几个jQuery提供的方法,它们分别对应于获取文档的高度、窗口的高度、垂直...

    jquery判断滚动条距离顶部的距离方法

    这个方法可以扩展到其他场景,比如当滚动条到达特定位置时加载更多内容、改变头部或底部的样式,或者启动特定的动画效果。通过结合CSS和jQuery,我们可以创建各种基于滚动位置的交互体验。 总结一下,jQuery提供了`...

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

    在事件处理函数中,我们可以检查当前滚动条的位置是否到达了页面底部。这里可以使用`$(window).scrollTop()`获取滚动条距离顶部的距离,`$(document).height()`获取整个文档的高度,以及`$(window).height()`获取...

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

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

    jquery.mCustomScrollbar自定义滚动条插件

    4. **交互性增强**:除了基本的滚动操作,还支持滚动条的拖动、滚动到顶部/底部等高级交互。 5. **API接口**:提供多种方法和事件,如`update()`用于更新滚动条,`scrollTo()`用于快速滚动到指定位置,方便开发者...

    使用jQuery判断浏览器滚动条位置的方法

    在某些情况下,我们还需要判断滚动条是否滚动到了页面的顶部或底部。为了做到这一点,我们可以计算当前滚动位置加上视窗高度(windowHeight)是否大于文档总高度(scrollHeight)。如果这个条件为真,那么说明滚动条...

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

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

    一个用jquery写的判断div滚动条到底部的方法【推荐】

    本篇文章将介绍如何利用jQuery来判断一个div元素的滚动条是否已经滚动到底部。关键在于理解与滚动条相关的几个JavaScript属性:scrollTop、scrollLeft和scrollHeight。 首先,我们来看一下相关属性的含义: 1. ...

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

    这里,`scrollTop: 0`设置滚动条的位置为顶部,"slow"参数表示动画执行的速度,可以替换为毫秒数值以自定义速度。 对于返回底部的功能,可以创建一个类似的按钮,并为其添加点击事件监听器: ```html 返回底部 ```...

    文本垂直无滚动条滚动(jquery)

    这个“文本垂直无滚动条滚动”功能主要依赖于JavaScript库jQuery来实现,它提供了高效且易于操作的DOM(文档对象模型)操作和事件处理能力。本文将详细讲解如何利用jQuery实现这一效果。 首先,我们需要引入jQuery...

    jQuery的滚动条事件插件jquery-waypoints

    **jQuery的滚动条事件插件:jquery-waypoints** 在网页设计和开发中,用户体验是至关重要的,而良好的交互性能够显著提升用户对网站的满意度。jQuery Waypoints 是一个优秀的JavaScript库,专门用于处理页面滚动时...

    jQuery制作仿Mac Lion OS滚动条效果

    例如,插件提供了一个“scrollend”事件,当滚动条滚动到容器底部或顶部时触发。文章还提到了如何使用“jquery-debounce”插件优化事件触发频率,防止因浏览器多次触发事件而导致性能问题。 9. 滚动条动画与UI反馈...

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

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

    jquery动态滚动条加载效果.zip

    })`监听滚动事件,然后通过`$(window).scrollTop()`获取滚动条顶部距离页面顶部的距离,`$(document).height()`获取文档总高度,`$(window).height()`获取窗口可视区域高度,判断是否接近页面底部。 2. **设置阈值...

Global site tag (gtag.js) - Google Analytics