Jquery实现返回顶部的功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> jquery实现模仿新浪的返回顶部 </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js ">
//-->
</script>
<script type="text/javascript">
<!--
$(function(){
//开始先隐藏返回顶部的按钮
$(".goto").hide();
/*回到顶部*/
$(".goto").click(function(){
$("body").scrollTo("fast");
return false;
});
/*控制滚动条滚动插件*/
jQuery.fn.scrollTo = function(speed) {
var targetOffset = $(this).offset().top;
$('html,body').stop().animate({scrollTop: targetOffset}, speed);
return this;
};
/*回到顶部跟随滚动条滚动*/
var gotoscroll = $(".goto").offset().top + 350;
$(window).scroll(function (){
var vtop=$(this).scrollTop();
if(750>vtop){
return;
}
$(".goto").show();
var offsetTop = gotoscroll + $(window).scrollTop() +"px";
$(".goto").animate({top : offsetTop },{ duration:500 , queue:false }); }); })
</script>
<style type="text/css">
.goto {
background-color: #D4D0C8;
border: 1px solid #FFFFFF;
color: #0078B6;
}
.goto span {
display: block;
padding: 4px;
}
.goto {
border-radius: 3px 3px 3px 3px;
border:1px solid #ccc;
bottom: 100px;
display: block;
font-family: Arial;
left: 50%;
line-height: 20px;
margin-left: 476px;
padding: 5px 3px 0 0;
position: absolute;
text-align: center;
width: 20px;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<div alt="Jquery兑现返回顶部的功能"/>
</div>
<div id="" alt="Jquery兑现返回顶部的功能"/>
</div>
<a href="javascript:void(0);" class="goto"><span>返回顶部</span></a>
</div>
</div>
</div>
</body>
</html>
分享到：
