html css jquery 回到頂部按鈕

今天做了個回到頂部的功能,在這里記錄一下,有需要可以拿去試試!

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"); //回到頂部
        });