滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jq1.6.js"></script>
<title>无标题文档</title>
</head>
<body style="height:5000px;background:#CCC">
<style>
*{margin:0;padding:0;border:none}
#jumpbar{width:400px; margin:0 auto; background:url(http://www.7gege.com/template/shop/images/jumpbar.gif) no-repeat; height:179px; position:absolute; left:20px}
#jumpbar a { display:block; width:25px; height:25px; }
</style>
<div id="jumpbar">
<a href="javascript:void(0)"></a><a href="javascript:void(0)"> <a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a>
</div>
<script>
$(function(){
var _go = [0,1017,1556,2205,3090,3968,$(document).height()];
var $jumpbar = $("#jumpbar"),
$window = $(window),
offset = $jumpbar.offset(),
topPadding = 100,
jL = $("#jumpbar a").length;
$(window).scroll(
function()
{
if($window.scrollTop() > offset.top)
{
$jumpbar.stop().animate(
{
top:$window.scrollTop()-offset.top + topPadding
},500
);
}
else
{
$jumpbar.stop().animate(
{
top:0
}
)
}
}
)
for(var i = 0; i <jL;i++)
{
$("#jumpbar a:nth-child("+(i+1)+")").bind("click",function(i){ return function(){$("html,body").stop().animate({scrollTop:_go[i]},500)}}(i),false);
}
});
</script>
<div style="height:4000px; background:#999;" ></div>
</body>
</html>
