jqery 返回顶部按钮

以下是使用 jQuery 实现返回顶部按钮的示例代码：

HTML 代码：

<a href="#" id="back-to-top" title="Back to top">&uarr;</a>

CSS 代码：

#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    font-size: 30px;
    color: #555;
    text-decoration: none;
}

jQuery 代码：

$(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;
    });
});

解释一下代码的作用：

1. 首先在 HTML 中添加了一个“返回顶部”的链接，它的 ID 为“back-to-top”；
2. 在 CSS 中设置这个链接的样式，包括位置、字体大小、颜色等；
3. 在 jQuery 中，当页面滚动时，判断滚动条的位置是否超过 100 像素，如果超过，则显示“返回顶部”的链接，否则隐藏它；
4. 当用户点击“返回顶部”的链接时，使用 jQuery 的 animate() 方法，以平滑的方式回到页面顶部。