当前位置：首页 > jquery

jquery滚动

2026-01-13 16:00:01jquery

jQuery 滚动事件监听

使用 jQuery 监听滚动事件可以通过 scroll() 方法实现。以下代码会在窗口滚动时触发回调函数：

$(window).scroll(function() {
    console.log("页面正在滚动");
});

获取滚动条位置

通过 scrollTop() 方法获取当前垂直滚动条的位置（像素值）：

$(window).scroll(function() {
    var scrollPosition = $(window).scrollTop();
    console.log("当前滚动位置：" + scrollPosition);
});

滚动到指定元素

使用 animate() 方法平滑滚动到页面中的某个元素：

jquery滚动

$("html, body").animate({
    scrollTop: $("#target-element").offset().top
}, 500); // 500ms 动画时长

滚动到页面顶部/底部

滚动到顶部：

$("html, body").animate({ scrollTop: 0 }, 500);

滚动到底部：

jquery滚动

$("html, body").animate({ 
    scrollTop: $(document).height() - $(window).height() 
}, 500);

滚动事件优化（防抖）

避免滚动事件高频触发导致性能问题，可使用防抖技术：

var timer;
$(window).scroll(function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        console.log("滚动结束");
    }, 200); // 200ms 延迟
});

检测滚动方向

通过比较当前和上一次的滚动位置判断方向：

var lastScrollTop = 0;
$(window).scroll(function() {
    var currentScrollTop = $(this).scrollTop();
    if (currentScrollTop > lastScrollTop) {
        console.log("向下滚动");
    } else {
        console.log("向上滚动");
    }
    lastScrollTop = currentScrollTop;
});

滚动加载（无限滚动）

结合 AJAX 实现滚动到页面底部时加载更多内容：

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        loadMoreContent(); // 自定义加载函数
    }
});

以上方法覆盖了 jQuery 中常见的滚动操作场景，可根据实际需求调整参数或逻辑。

标签: jquery