当前位置：首页 > jquery

jquery 置顶

2026-02-03 18:49:29jquery

jQuery 实现置顶功能的方法

使用 jQuery 实现页面元素置顶（如返回顶部按钮或固定导航栏）可以通过以下方式实现：

jquery 置顶

监听滚动事件并控制元素显示

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

CSS 固定定位样式

#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    cursor: pointer;
    z-index: 999;
}

完整示例代码

<!DOCTYPE html>
<html>
<head>
    <style>
        #back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: none;
            background: #333;
            color: #fff;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            z-index: 999;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div style="height: 2000px;">滚动测试内容</div>
    <div id="back-to-top">返回顶部</div>

    <script>
        $(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>
</body>
</html>