js+JQuery實現返回頂部功能

標籤：返回頂部   color   io   os   使用   ar   sp   cti   on   

在ＨＴＭＬ頭部添加

<p id="back-to-top"><a href="#top"><span></span>返回頂部</a></p>

然後 jquery 中寫入

 <script>
        $(function () {
            //當捲軸的位置處於距頂部100像素以下時，跳轉連結出現，否則消失
            $(function () {
                $(window).scroll(function () {
                    if ($(window).scrollTop() > 100) {
                        $("#back-to-top").fadeIn(1500);
                    }
                    else {
                        $("#back-to-top").fadeOut(1500);
                    }
                });

                //當點擊跳轉連結後，回到頁面頂部位置

                $("#back-to-top").click(function () {
                    $(‘body,html‘).animate({ scrollTop: 0 }, 1000);
                    return false;
                });
            });
        });
</script>

 

為了美觀 css樣式  增加自己的圖片地址

p#back-to-top {
    position: fixed;
    display: none;
    bottom: 100px;
    right: 80px;
}

    p#back-to-top a {
        text-align: center;
        text-decoration: none;
        color: red;
        display: block;
        width: 64px;
        /*使用CSS3中的transition屬性給跳轉連結中的文字添加漸層效果*/
        -moz-transition: color 1s;
        -webkit-transition: color 1s;
        -o-transition: color 1s;
    }

        p#back-to-top a:hover {
            /*color:#979797;*/
            color: #000;
        }

        p#back-to-top a span {
            background:transparent url(‘../img/Gnome-Go-Top-48.png‘) no-repeat;
           
            border-radius: 6px;
            display: block;
            height: 64px;
            width: 56px;
            margin-bottom: 5px;
            /*使用CSS3中的transition屬性給<span>標籤背景顏色添加漸層效果*/
            -moz-transition: background 1s;
            -webkit-transition: background 1s;
            -o-transition: background 1s;
        }

#back-to-top a:hover span {
    background: transparent url(‘../img/Gnome-Go-Top-48.png‘) no-repeat ;
}

 

js+JQuery實現返回頂部功能