jquery 返回顶部

基础概念

"返回顶部"（Scroll to Top）是一个常见的网页功能，允许用户通过点击一个按钮快速滚动到页面的顶部。jQuery 是一个流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。

类型与应用场景

静态按钮：固定在页面右下角的按钮。
动态显示：当用户滚动一定距离后，按钮才显示出来。
动画效果：平滑滚动而不是瞬间跳转到顶部。

应用场景包括但不限于：

长文章页面。
电商网站的详细商品页面。
任何内容丰富的网站。

示例代码

以下是一个简单的 jQuery 返回顶部按钮的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部示例</title>
<style>
    #back-to-top {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        font-size: 18px;
        border: none;
        outline: none;
        background-color: #555;
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
    }

    #back-to-top:hover {
        background-color: #777;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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>
</head>
<body>

<div style="height:2000px;">
    <!-- 页面内容 -->
</div>

<button id="back-to-top" title="返回顶部">Top</button>

</body>
</html>