返回top写法技巧

HTML
<
a href="#" class="fixed">top</a>

CSS:

.fixed{
    padding: 20px 15px;
    text-transform: uppercase;
    position: fixed;
    left:50%;
    bottom: 60px;
    margin-left: 475px;      //为总的main容器的宽度/2再加上10px。
    background-color: #000;
    font: normal bold 17px;
    color: #fff;
}

这样做的目的是在不同的分辨率下都能正常。

<script type="text/javascript">  
function goTop()  
{  
    $(window).scroll(function(e) {  
        //若滚动条离顶部大于100元素  
        if($(window).scrollTop()>100)  
            $("#gotop").fadeIn(1000);//以1秒的间隔渐显id=gotop的元素  
        else  
            $("#gotop").fadeOut(1000);//以1秒的间隔渐隐id=gotop的元素  
    });  
};  
$(function(){  
    //点击回到顶部的元素  
    $("#gotop").click(function(e) {  
            //以1秒的间隔返回顶部  
            $('body,html').animate({scrollTop:0},1000);  
    });  
    $("#gotop").mouseover(function(e) {  
        $(this).css("background","url(images/backtop2013.png) no-repeat 0px 0px");  
    });  
    $("#gotop").mouseout(function(e) {  
        $(this).css("background","url(images/backtop2013.png) no-repeat -70px 0px");  
    });  
    goTop();//实现回到顶部元素的渐显与渐隐  
});  
</script>  

 

posted @ 2015-11-27 16:55  黑客PK  阅读(500)  评论(0编辑  收藏  举报