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>

　　

 

效果