html css jquery 回到顶部按钮

Posted 2020-08-27 范斯

今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试!

CSS部分,很简单就一个class

        /*回到顶部*/
        .back-top
        {
            position: fixed;
            right: 15px;
            bottom: 15px;
            z-index: 9999;
            font-size: 25px;
            width: 40px;
            height: 40px;
            background-color: #adadad;
            color: #ffffff;
            cursor: pointer;
            border-radius: 2px;
            text-align: center;
        }
        .back-top:hover
        {
            background-color: #a3a3a3;
        }

html部分 也非常简单,一个div, 里面一个图标就可以了.图标我是用奥森图标,大家可以自行更换

<div class="back-top" style="display: none;" title="回到顶部">
        <!--此处回到顶部图标自己改-->
        <i class="fa fa-angle-double-up"></i>
    </div>

 

jQuery 部分,也非常简单,相关注意点看注释

        //回到顶部
        $(function () {
            if ($(window).width() >= 700) {//本人的项目是响应式的,但是移动端不显示回到顶部,自己可以去掉
                $(window).scroll(function () {
                    if ($(window).scrollTop() <= 200) {
                        if ($(".back-top").css("display") != "none") {
                            $(".back-top").slideUp("normal"); //缓慢下降隐藏
                        }
                    }
                    else {
                        if ($(".back-top").css("display") == "none") {
                            $(".back-top").slideDown("normal"); //缓慢上升显示
                        }
                    }
                });
            }
        });
        $(".back-top").click(function () {
            $("body").animate({ scrollTop: 0 }, "slow"); //回到顶部
        });