当前位置：首页 > jquery

jquery返回顶部

2026-03-16 17:14:18jquery

使用jQuery实现返回顶部功能

jQuery可以通过简单的代码实现平滑滚动返回顶部的效果。以下是几种常见的实现方式：

基础实现方法

在页面底部添加一个返回顶部按钮，并通过jQuery实现点击后平滑滚动到顶部：

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

<script>
$(document).ready(function(){
    $(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}, 800);
        return false;
    });
});
</script>

带渐显渐隐效果的实现

为返回顶部按钮添加更平滑的显示/隐藏过渡效果：

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

带进度指示的实现

在返回顶部按钮旁边显示页面滚动百分比：

jquery返回顶部

<a href="#" id="back-to-top">
    <span id="progress-percent">0%</span>
    <span>返回顶部</span>
</a>

<script>
$(window).scroll(function(){
    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();
    var scrollPercent = Math.round(($(window).scrollTop() / ($(document).height() - $(window).height())) * 100);
    $('#progress-percent').text(scrollPercent + '%');
});
</script>