Jquery实现返回顶部的功能
Allenyhy 2012-06-04
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery实现模仿新浪的返回顶部</title>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
//-->
</script>
<scripttype="text/javascript">
<!--
$(function(){
//开始先隐藏返回顶部的按钮
$(".goto").hide();
/*回到顶部*/
$(".goto").click(function(){
$("body").scrollTo("fast");
returnfalse;
});
/*控制滚动条滚动插件*/
jQuery.fn.scrollTo=function(speed){
vartargetOffset=$(this).offset().top;
$('html,body').stop().animate({scrollTop:targetOffset},speed);
returnthis;
};
/*回到顶部跟随滚动条滚动*/
vargotoscroll=$(".goto").offset().top+350;
$(window).scroll(function(){
varvtop=$(this).scrollTop();
if(750>vtop){
return;
}
$(".goto").show();
varoffsetTop=gotoscroll+$(window).scrollTop()+"px";
$(".goto").animate({top:offsetTop},{duration:500,queue:false});});})
</script>
<styletype="text/css">
.goto{
background-color:#D4D0C8;
border:1pxsolid#FFFFFF;
color:#0078B6;
}
.gotospan{
display:block;
padding:4px;
}
.goto{
border-radius:3px3px3px3px;
border:1pxsolid#ccc;
bottom:100px;
display:block;
font-family:Arial;
left:50%;
line-height:20px;
margin-left:476px;
padding:5px3px00;
position:absolute;
text-align:center;
width:20px;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<divclass="outter">
<divclass="inner">
<divclass="content">
<div>
<imgsrc="http://ww4.sinaimg.cn/bmiddle/70f7c889jw1dtmiunvnahj.jpg"border="0"alt=""/>
</div>
<divid=""class="">
<imgsrc="http://ww3.sinaimg.cn/bmiddle/7112c07bjw1dtm7us4pwrj.jpg"border="0"alt=""/>
</div>
<ahref="javascript:void(0);"class="goto"><span>返回顶部</span></a>
</div>
</div>
</div>
</body>
</html>
分享到：
