当前位置：首页 > jquery

jquery回到顶部

2026-03-16 20:32:07jquery

jQuery 返回顶部实现方法

使用 jQuery 实现返回顶部功能可以通过平滑滚动或直接跳转的方式完成。以下是几种常见的实现方法：

平滑滚动返回顶部

$('html, body').animate({scrollTop: 0}, 'slow');

这段代码会让页面平滑滚动到顶部，滚动速度由 'slow' 参数控制，也可以改为具体毫秒数如 500。

添加返回顶部按钮

jquery回到顶部

<button id="back-to-top" style="position: fixed; bottom: 20px; right: 20px; display: none;">返回顶部</button>

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $('#back-to-top').fadeIn();
    } else {
        $('#back-to-top').fadeOut();
    }
});

$('#back-to-top').click(function() {
    $('html, body').animate({scrollTop: 0}, 'slow');
    return false;
});

这段代码会在页面滚动超过 100 像素时显示返回顶部按钮，点击按钮平滑滚动到顶部。

直接跳转返回顶部

window.scrollTo(0, 0);

这种方法会立即跳转到页面顶部，没有动画效果。

jquery回到顶部

带渐显效果的返回顶部按钮

$(window).scroll(function() {
    if ($(this).scrollTop() > 300) {
        $('#back-to-top').stop().animate({
            opacity: 1
        }, 500);
    } else {
        $('#back-to-top').stop().animate({
            opacity: 0
        }, 500);
    }
});

这段代码为返回顶部按钮添加了淡入淡出效果，当滚动超过 300 像素时按钮渐显，否则渐隐。

注意事项