自用基于jquery的返回顶部js一枚

前言

虽然返回顶部代码已经烂大街了，但我这里还是分享一下很久以前自己写的返回顶部js，样式可自己具体调整。

上代码

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(window).load(function(){
    //点击返回顶部
    function topBack(){
        var sh = $(window).scrollTop();
        if(sh>100){
            $("#top-back").show();
        }else{
            $("#top-back").hide();  
        }   
    }
    $(window).scroll(function(){
        topBack();  
    })
    $(window).resize(function(){
        topBack();  
    }) 
});
function goTop(){
    $("html,body").animate({scrollTop:"0px"},200)
}
</script>

#top-back {
    position:fixed;
    right:5px;
    height:20px;
    line-height:20px;
    bottom:5px;
    display:none;
    *position:absolute;
    *top:expression(eval(documentElement.scrollTop+document.documentElement.offsetHeight-20));
    border:solid 1px #969696;
    background:#F7F7F7;
    color:#6C6C6C;
    border-radius:4px;
    padding:2px 4px;
    box-shadow:0px 0px 6px #424242;
    box-shadow:0px 0px 6px #424242;
    cursor:pointer;
    z-index:3009;
}
#top-back:hover {
    border:solid 1px #969696;
    background:#FEFEFE;
    color:#424242;
    box-shadow:0px 0px 12px #424242;
    box-shadow:0px 0px 12px #424242;
}

<div style="height: 1800px;"> </div>

<div id="top-back" onclick="goTop();">Top</div>

如果您觉得您在我这里学到了新姿势，博主支持转载，姿势本身就是用来相互学习的。同时，本站文章如未注明均为 hisune 原创 请尊重劳动成果 转载请注明 转自: 自用基于jquery的返回顶部js一枚 - hisune.com