返回顶部 jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部示例</title>
    <style>
        #backToTopBtn {
            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;
        }

        #backToTopBtn:hover {
            background-color: #777;
        }
    </style>
</head>
<body>

<button id="backToTopBtn" title="返回顶部">Top</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // 当滚动超过 20px 时显示按钮
    $(window).scroll(function(){
        if ($(this).scrollTop() > 20) {
            $('#backToTopBtn').fadeIn();
        } else {
            $('#backToTopBtn').fadeOut();
        }
    });

    // 点击按钮时平滑滚动到顶部
    $('#backToTopBtn').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
});
</script>

<!-- 页面内容 -->
<div style="height:2000px;">
    <!-- 这里放置大量内容以测试滚动效果 -->
</div>
</body>
</html>