html css jquery 回到頂部按鈕

標籤：span   click   class   項目   back   pointer   移動   index   one   

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

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

 

html css jquery 回到頂部按鈕