当前位置：首页 > jquery

jquery返回顶部

2026-02-03 20:43:40jquery

使用jQuery实现返回顶部功能

通过jQuery可以轻松实现平滑滚动到页面顶部的功能，以下是几种常见方法：

方法一：基础平滑滚动

jquery返回顶部

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

方法二：带按钮的返回顶部

<button id="backToTop" style="display:none;">返回顶部</button>

<script>
$(window).scroll(function() {
    if ($(this).scrollTop() > 300) {
        $('#backToTop').fadeIn();
    } else {
        $('#backToTop').fadeOut();
    }
});

$('#backToTop').click(function() {
    $('html, body').animate({scrollTop: 0}, 600);
});
</script>

方法三：带缓动效果的滚动

jquery返回顶部

$('a[href="#top"]').click(function() {
    $('html, body').animate({scrollTop: 0}, {
        duration: 1000,
        easing: 'swing'
    });
    return false;
});

方法四：使用requestAnimationFrame优化性能

function scrollToTop() {
    const c = document.documentElement.scrollTop || document.body.scrollTop;
    if (c > 0) {
        window.requestAnimationFrame(scrollToTop);
        window.scrollTo(0, c - c / 8);
    }
}

$('#backToTop').click(function() {
    scrollToTop();
});

样式优化建议

可以添加CSS美化返回顶部按钮：

#backToTop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #333;
    color: white;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}

#backToTop:hover {
    opacity: 1;
}