下载例子地址 http://www.jb51.net/jiaoben/125246.html
学习：http://www.w3school.com.cn/jquery/css_scrolltop.asp
scrollTop(a) a为离到该元素top的距离（即高度），而不是滚动的长度
offset() 则是该元素距离文档顶部的的距离。这里一定要注意是文档的顶部的距离，而不是说浏览器顶部的距离。（计算时只对可视元素有效，被滚动下拉隐藏的部分不算在内）如一个页面中间放了个div A（A含滚动条，屏幕滚动条隐藏）里面包含了abc三个div依次垂直排放,下拉后a被遮掉，则c.offset.top()计算的值为A的高度加上b的长度。
所以如果这时要锚a的话，可能会出现偏移量为负值的情况（a的位置已经跳出屏幕外，负值的绝对值为跳出屏幕外的高度，如果没有跳出屏幕，则计算的是隐藏位置的高度）。
但如果是在整个body上滚动，滚动条下拉隐藏的部分会计算被遮掉的部分的值。见下载的例子。
自己例子:scrollTop范围是相对于自己的元素，offset是相对于整个屏幕。
contactList_是一个位于屏幕中间的div,里面有个滚动条。
$("#contactList_").offset().top获取的是可视contactList_ 这个Div在屏幕页面的高度，所以它是固定值，即这个div到屏幕顶的距离。
$("#index_" + index).offset().top计算获取#index_" + index在这个屏幕的可视高度
height_scrollTop就是要滚动的距离
$("#contactList_").scrollTop()当前为滚动是这个contactList_ Div里面当前元素的高度
height_scrollTop + $("#contactList_").scrollTop()即为#index_" + index在contactList_里面的高度
要锚到contactList_ Div 里面的index-，获取的时这个
/** 快捷锚点链接点击 */
$(".keyword").click(function(e) {
// alert($("#contactList_").scrollTop())
alert($("#contactList_").offset().top)//相对于浏览器固定的偏移高度
var index = this.title=="#"?"0":this.title; // 数字锚点“#”为JQ关键字，用“0”转义
// 跳转至页面对应锚点位置// html,body
alert($("#index_" + index).offset().top)
var height_scrollTop = $("#index_" + index).offset().top - $("#contactList_").offset().top;
alert(height_scrollTop)
alert(height_scrollTop + $("#contactList_").scrollTop())
$("#contactList_").animate({
scrollTop : height_scrollTop + $("#contactList_").scrollTop()
}, 600);
});
/** 置顶锚点链接点击 */
$("#toTop").click(function(e) {
$("#contactList_").animate({scrollTop : 0}, 600);
});
下载学习例子
<!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" />
<title>jQuery锚点带动画跳转特效</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<link href="css/christmas.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".index_nav li a").click(function(event) {
var index=this.title
var id='#'+'index_'+index
alert($(id).offset().top)
$("html,body").animate({scrollTop: $(id).offset().top}, 1000);
});
$(".taoba").click(function(event) {
var index=this.title
var id='#'+'index_'+index
alert($(id).offset().top)
$("html,body").animate({scrollTop: $(id).offset().top}, 1000);
});
function a(x,y){
l = $('#main').offset().left;
w = $('#main').width();
$('#tbox').css('left',(l + w + x) + 'px');
$('#tbox').css('bottom',y + 'px');
}//获取#tbox的div距浏览器底部和页面内容区域右侧的距离函数#main为页面的可视宽度
$(function() {
$(window).scroll(function(){
t = $(document).scrollTop();
if(t>500){
$('#tbox').show();
}else{
$('#tbox').hide();
}
if(t > 50){
$('#gotop').fadeIn('slow');
}else{
$('#gotop').fadeOut('slow');
}
})
a(10,100);//#tbox的div距浏览器底部和页面内容区域右侧的距离
$('#gotop').click(function(){
$('body,html').animate({
scrollTop: 0
},
800);//点击回到顶部按钮，缓懂回到顶部,数字越小越快
return false;
})
});
});
</script>
</head>
<body>
<div class="indexnav_wrap" >
<ul class="index_nav">
<li><a href="javascript:void(0)" title="1"><i>活动</i><strong>1</strong></a></li>
<li><a href="javascript:void(0)" title="2"><i>活动</i><strong>2</strong></a></li>
<li><a href="javascript:void(0)" title="3"><i>活动</i><strong>3</strong></a></li>
<li><a href="javascript:void(0)" title="4"><i>活动</i><strong>4</strong></a></li>
<li><a href="javascript:void(0)" title="5"><i>活动</i><strong>5</strong></a></li>
</ul>
</div>
<div class="h50"></div>
<div class="row" id="main">
<h2 id="index_1">这是第一个活动页</h2>
<div class="mainpage mainpage1">
</div>
</div>
<div class="h15"></div>
<div class="row">
<h2 id="index_2">这是第二个活动页</h2>
<div class="mainpage mainpage2">
</div>
</div>
<div class="h15"></div>
<div class="row">
<h2 id="index_3">这是第三个活动页</h2>
<div class="mainpage mainpage3">
</div>
</div>
<div class="h15"></div>
<div class="row">
<h2 id="index_4">这是第四个活动页</h2>
<div class="mainpage mainpage4">
</div>
</div>
<div class="h15"></div>
<div class="row">
<h2 id="index_5">这是第五个活动页</h2>
<div class="mainpage mainpage5">
</div>
</div>
<div id="tbox"><!-- 这个必须有 id="tbox"-->
<a class="taoba" href="javascript:void(0)" title="1">1</a>
<a class="taoba" href="javascript:void(0)" title="2">2</a>
<a class="taoba" href="javascript:void(0)" title="3">3</a>
<a class="taoba" href="javascript:void(0)" title="4">4</a>
<a class="taoba" href="javascript:void(0)" title="5">5</a>
<a id="gotop" href="javascript:void(0)" title="回到顶部">回到顶部</a> <!-- 这个也是id="gotop" -->
</div>
</div>
</body>
</html>