下載例子地址 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>