jquery 置顶按钮

需求

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

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

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

编写基本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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券