实现返回顶部按钮一直在页面底部（兼容ie6）

最新推荐文章于 2020-02-07 20:12:05 发布

gaopeng19960108

最新推荐文章于 2020-02-07 20:12:05 发布

阅读量600

点赞数 1

CC 4.0 BY-SA版权

文章标签：底部返回顶部按钮浮动兼容ie6

本文链接：https://blog.youkuaiyun.com/gaopeng19960108/article/details/51507884

本文介绍了一种使用jQuery来实现在网页滚动时显示并定位到页面顶部的功能的方法。通过监听窗口滚动事件调整按钮的位置，并在点击按钮时将页面平滑滚动到顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="./jquery-1.8.0.js"></script>
    <style type="text/css">
        .back_top {width: 100px; height: 100px; border: 1px solid purple; text-align: center; line-height: 100px; display: none;}
        .change {position: absolute; left: 600px; display: block; cursor: pointer;}
    </style>
</head>
<body>
    <div style="width:500px; height:2200px; border:1px solid red; margin:0 auto; position:relative;">
        <div style="margin-top:10px; border:1px solid blue;">a</div>
        <div style="margin-top:2140px; border:1px solid blue;">b</div>

        <div class="back_top">
            返回顶部
        </div>
    </div>

    <script type="text/javascript">
        $(window).resize(function() {
            $('.back_top').css('bottom', $(document.body).height() - $(window).scrollTop() - $(window).height()  + 10);
        });

        $(window).scroll(function() {
            $('.back_top').addClass('change');
            $('.back_top').css('bottom', $(document.body).height() - $(window).scrollTop() - $(window).height() + 10);

            if($(window).scrollTop() === 0) {
                $('.back_top').removeClass('change');
            }
        });

        $('.back_top').on('click', function() {
            $(window).scrollTop(0);
        });
    </script>
</body>
</html>