js實現回到頂部功能

 

手機站、PC站網頁使用javascript，jquery實現頁面一鍵向上，回到頂部功能

需要引入jquery.js文件

 

 

 top.png

 

<div class="back_top" id="back-to-top">
</div>

<style>
    .back_top{
        position: fixed;
        z-index: 999999999999;
        background: url(/${res}/images/top.png) no-repeat;   /*回到頂部背景圖片*/
        display: block;
        background-position: 0 -40px;
        width: 58px;
        height: 58px;
        right: 18px;
        bottom: 32px;
        filter: alpha(opacity=80);

    }
</style>


<script>
    $(function () {
        $('#back-to-top').hide();
        // 獲取要大於的高度
        //當滾動條的位置處於距頂部100像素以下時，跳轉鏈接出現，否則消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>100){
                    $("#back-to-top").fadeIn(500);
                }
                else
                {
                    $("#back-to-top").fadeOut(500);
                }
            });

            //當點擊跳轉鏈接后，回到頁面頂部位置
            $("#back-to-top").click(function(){
                //$('body,html').animate({scrollTop:0},1000);
                if ($('html').scrollTop()) {
                    $('html').animate({ scrollTop: 0 }, 1000);
                    return false;
                }
                $('body').animate({ scrollTop: 0 }, 1000);
                return false;
            });
        });
    })
</script>

　　

 

效果