`

使用jquery判断鼠标滚动到页面底部

 
阅读更多
$(function(){
    $(window).scroll(function(){
        if(arrviedAtBottom()) {
            //...已到达最底部
        }
    });

    var arrivedAtBottom = function () {
        return $(document).scrollTop() + $(window).height() == $(document).height();
    }
});

另转载@龙城野火提供的原生js写法(原文链接:http://blog.sina.com.cn/s/blog_4b67d3240100rhkh.html):



function reachBottom() {



   var scrollTop = 0;

   var clientHeight = 0;

   var scrollHeight = 0;



   if (document.documentElement && document.documentElement.scrollTop) {

       scrollTop = document.documentElement.scrollTop;

   } else if (document.body) {

       scrollTop = document.body.scrollTop;

   }
分享到:
评论

相关推荐

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

    本文将深入探讨如何使用jQuery来实现“鼠标滚动条到页面底部时浮动层滑动弹出信息”的功能。 首先,我们需要理解jQuery的基本用法。jQuery是一个JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互。在HTML...

    jquery仿新浪微博鼠标滚动到底部加载内容.rar

    【jQuery仿新浪微博鼠标滚动到底部加载内容】是一个常见的网页动态加载技术,主要应用于社交媒体和新闻网站,以提高用户体验。在用户滚动页面至底部时,无需手动点击“加载更多”按钮,内容会自动分页加载,这被称为...

    jquery百度百科底部浮动导航页面滚动预览

    4. **jQuery代码实现**:在页面加载完成后,我们需要使用jQuery监听滚动事件,当用户滚动到特定位置时,改变导航链接的样式以显示预览效果。这里可以使用`$(window).scroll()`函数,然后通过`scrollTop()`方法获取...

    jQuery类似微博信息更新鼠标滚动页面无限加载更多内容

    "jQuery类似微博信息更新鼠标滚动页面无限加载更多内容"这个主题,就是关于如何利用jQuery实现一个动态加载机制,即“滚动加载”或“懒加载”,让用户在浏览时无需翻页,只需滚动页面就能自动加载更多内容。...

    jquery文字上下滚动

    要实现jQuery文字上下滚动的效果,首先需要在页面中引入jQuery库。这通常通过在HTML文件的`<head>`部分插入链接到CDN(内容分发网络)上的jQuery库或者将jQuery库的JavaScript文件下载到本地并引入来完成。例如: `...

    使用jQuery或者原生js实现鼠标滚动加载页面新数据

    当用户滚动到页面底部时,触发特定的加载事件。以下是一个简单的示例: ```javascript $(window).scroll(function () { var scrollTop = $(this).scrollTop(); // 获取当前滚动条在Y轴上的位置 var scrollHeight ...

    动感jQuery返回顶部

    在网页设计中,当用户滚动页面到底部时,提供一个便捷的“返回顶部”链接是非常实用的,它可以帮助用户快速回到页面的起始位置,提升用户体验。 【描述】:“效果比较好的jQuery返回顶部代码”指的是利用jQuery的...

    动画效果随鼠标向下滑动而加载

    这可以通过判断滚动位置接近页面底部或者设定一定的滚动距离阈值来触发内容的异步加载。 5. **兼容性处理**:确保动画在不同的浏览器和设备上都能正常工作,可能需要针对旧版浏览器进行polyfill或提供降级方案。 ...

    无间隙循环滚动鼠标浮动停止滚动

    无间隙循环滚动意味着用户可以一直滚动页面,即使内容已经到达尽头,页面也会自动返回到开头,形成一个无缝的循环。这通常是通过JavaScript或者其他前端技术实现的,通过监听滚动事件并配合适当的算法来控制页面的...

    基于jQuery 的动画锚点滚动定位特效(回到顶部).zip

    3. **CSS样式**:使用CSS来定义按钮的样式,使其在页面底部或角落出现,并在鼠标悬停时改变样式,以增加交互性。 4. **JavaScript/jQuery代码**: - 首先,隐藏返回顶部按钮,例如`$('.back-to-top').hide();` - ...

    jQuery实现带底部返回顶部按钮功能特效源码.zip

    本资源"jQuery实现带底部返回顶部按钮功能特效源码.zip"提供了一种利用jQuery实现页面底部返回顶部按钮的解决方案,这对于长页面浏览尤其有用,可以方便用户快速回到页面的顶部,提升用户体验。 首先,我们要理解...

    jQuery页面滚动触发区块特效

    它不是一次性加载整个页面,而是当用户滚动到页面底部时,通过Ajax请求加载更多内容。这减少了初次加载页面所需的时间,提高了用户体验,尤其适用于内容丰富的网站。 六、实现区块特效的步骤 1. 引入jQuery库:在...

    基于jQuery实现的鼠标悬停显示,鼠标离开隐藏,带返回顶部的在线客服代码.rar

    在jQuery中,这通常可以通过监听滚动事件并判断页面是否滚动到底部来实现。如果用户滚动到一定距离,一个返回顶部的按钮将显示出来,用户点击后,页面将平滑滚动回顶部。以下是一个简单的实现示例: ```javascript ...

    jquery可变透明度返回顶部特效.zip

    在页面加载完成后,需要监听滚动事件(`$(window).scroll()`),判断用户是否滚动到页面底部。这通常通过比较页面滚动距离与文档总高度来实现。一旦满足条件,按钮就会显示出来。同时,jQuery还用于处理点击事件,当...

    鼠标滚轮到最底端继续加载新数据思路

    2. **判断滚动位置**:为了确定用户是否到达页面底部,通常会设置一个阈值,比如距离页面底部一定像素距离时,视为到达底部。这个阈值可以根据实际页面布局和内容长度进行调整。 3. **异步加载**:当触发加载新数据...

    JQuery 15种经典案例

    1. **导航菜单**:JQuery可以创建响应式的导航菜单,当用户滚动页面时,菜单可以自动吸附或固定在顶部,提供便捷的导航。通过`$(window).scroll()`监听滚动事件,配合CSS样式改变,实现动态效果。 2. **图片轮播**...

    多年收集的 JavaScript、jQuery 插件、UI 集合,值得温故知新的前端学习旅程

    它涉及到页面滚动事件的监听,以及使用jQuery动画方法实现平滑滚动至顶部的效果。 9. **JS滚动栏定位.html**:这个文件可能讲解了如何基于页面滚动位置执行某些操作,比如固定导航栏或高亮当前选中的导航项,这需要...

    jQuery返回顶部滑动跳转效果.zip

    按钮通常会作为链接(标签)放置在页面底部,或者固定在屏幕的一侧,以便随时访问。HTML属性如id或class将被用于JavaScript和CSS选择器,以便正确地应用样式和行为。 **HTML5** HTML5引入了许多新的元素和API,...

    jquery.returnTop返回顶部Jquery插件

    在Web开发中,页面内容过长时,用户滚动到页面底部往往需要方便地返回顶部。为此,开发者们经常利用jQuery库创建一个名为"returnTop"的插件,帮助实现一键回到页面顶部的功能。本文将深入探讨这个jQuery ReturnTop...

    jquery瀑布流

    1. **事件监听**:主要依赖于用户的滚动动作,通常监听`$(window).scroll()`事件,当用户滚动到页面底部时触发加载新内容的函数。 2. **动态加载**:当用户滚动到底部,通过Ajax向服务器请求数据。在本示例中,...

Global site tag (gtag.js) - Google Analytics