jquery 置顶按钮

Devops海洋的渔夫

发布于 2019-06-02 05:25:43

3K00

代码可运行

文章被收录于专栏：Devops专栏Devops专栏

运行总次数：0

代码可运行

需求

返回到页面的最上方。这个功能在简书阅读的时候右下角也有，如下：

点击这个按钮，直接就返回到最上方了。

当文档达到最上方的时候，置顶按钮消失。

编写基本HTML\CSS

这个图片我用了阿里的矢量图库，如果不懂如何使用的朋友，可以访问iconfont阿里巴巴矢量图标库从注册到使用。

再写一些p段落，用来形成滚动条，如下：

好了，下面只需要监听滚动事件，进行处理即可。

点击置顶按钮，设置返回顶部

这里就涉及到如何设置返回顶部的兼容性写法，如下： $('html,body').animate({"scrollTop":0});

设置置顶按钮的显示和隐藏

下一个问题就是，这个置顶按钮不用一直显示，只有文档拖动到下方一定的距离才会显示，上方的位置则不用显示。

当滚动条下拉，则显示。

基本上已经实现好了这个置顶按钮了。

完整代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/font_43t074pzx63/iconfont.css">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        p{
            text-align: center;

        }

        .icon-zhiding{
            font-size: 50px;
            color: rgb(18,150,219);
            position: fixed;
            bottom: 50px;
            right: 50px;
            cursor: pointer;
            display: none;
        }
    </style>
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(window).scroll(function(){
                console.log($(document).scrollTop());

                if($(document).scrollTop() > 200){
                    // $('.icon-zhiding').show();
                    $('.icon-zhiding').fadeIn();
                }else{
                    $('.icon-zhiding').fadeOut();
                }
            });

            $(".icon-zhiding").click(function(){
                console.log($('html,body').scrollTop());
                $('html,body').animate({"scrollTop":0});
            });
        })
    </script>
</head>
<body>
    <span class="iconfont icon-zhiding"></span>
    <!-- (p{文档内容}+br*10)*5 -->
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>