回到顶部代码+jQuery

2010-12-16 14:19:59 by 【6yang】, 245 visits, 收藏 | 返回

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>回到顶部代码+jQuery</title>
</head>
<script src="http://www.6yang.net/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">

*{ padding:0; margin:0;}
a:active {
    text-decoration: none;
}
a:link {
    color: #2CA9CC;
    text-decoration: none;
}
.go-top {
    bottom: 10%;
    height: 57px;
    opacity: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    position: fixed;
    right: -63px;
    text-indent: -9999px;
    width: 19px;
}
.go-top a {
    -moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    background-attachment: scroll;
    background-color: transparent;
    background-image: url("http://www.6yang.net/tempPic/ico_gotop.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    height: 57px;
    width: 19px;
}
.go-top a:hover{
    background-position:-19px 0;
}
.go-top a:focus{outline:none;}
</style>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){
    getgoTopleft();
    function getgoTopleft(){
        var windowWidth = $(window).width();
        var mainWidth = $("#main").width();
        var leftSpaceWidth = (windowWidth - mainWidth)/2;
        var gotTopWidth = $(".go-top").width();
        var leftmainPositon = leftSpaceWidth + mainWidth + 15;
        $(".go-top").css({"left":leftmainPositon});
    }
    $(window).resize(function(){
        getgoTopleft();
    });
    $(window).scroll(function() {
        var scrollTopHeight= $(document).scrollTop();
        if(scrollTopHeight > 1){
            $(".go-top").stop(true,true).animate({opacity:1},{duration:500,complete:function(){
                $(this).show();
            }});
        }else{
            $(".go-top").stop(true,true).animate({opacity:0},{duration:500,complete:function(){
                $(this).hide();
            }});
        }
    });
});

//]]>
</script>
<body>
<div class="go-top"><a href="#"><span>返回顶部</span></a></div>
<div id="main" style="height:2000px; width:900px; background:#999; margin:0 auto;"></div>
</body>
</html>

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=855&cid=7

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

回到顶部代码+jQuery

图片原图