動(dòng)態(tài)jQuery的滾動(dòng)鏈接??索引      
  
  
  
  
      
  
  
  
  
        
  
  
  
  
          
  
  
  
  
           快速鏈接： 
  
  
  
  
           
  A   
  
  
  
  
           
  B   
  
  
  
  
           
  C   
  
  
  
  
           
  D   
  
  
  
  
           
  E   
  
  
  
  
           
  F   
  
  
  
  
           
  G   
  
  
  
  
          
  
  
  
  
       

 
 
 
 
  
  
  
  
  
  
  
  
  
   
Arrested Development IMDB
  
  
  
  
  
   
  
  
  
  
  
 

CSS頁(yè)面樣式

一些默認(rèn)的樣式表的內(nèi)容。除了典型的CSS重置 我用的是CSS3陰影

 
 
 
 
  
  
  
  
/* 頁(yè)面主要樣式布局 */ 
  
  
  
  
 #w { width: 620px; margin: 0 auto; padding-top: 55px; }   
  
  
  
  
 #container {   
  
  
  
  
   padding: 14px 20px;  
  
  
  
  
   background: #fff;  
  
  
  
  
   -webkit-box-shadow: 2px 2px 1px rgba(0,0,0,0.35);  
  
  
  
  
   -moz-box-shadow: 2px 2px 1px rgba(0,0,0,0.35);  
  
  
  
  
   box-shadow: 2px 2px 1px rgba(0,0,0,0.35);  
  
  
  
  
   -webkit-border-radius: 5px;  
  
  
  
  
   -moz-border-radius: 5px;  
  
  
  
  
   border-radius: 5px;  
  
  
  
  
 } 
 
 
 

在每個(gè)錨鏈接停止之前，在他的頂部設(shè)置一個(gè)padding-top:8px的大小。這樣，我們的滾動(dòng)效果不停止在每個(gè)標(biāo)題的頂部，有一些額外的空白

 
 
 
 
  
  
  
  
/* 具體的每個(gè)跳轉(zhuǎn)到錨鏈接的樣式DIV */ 
  
  
  
  
 #shows { display: block; }  
  
  
  
  
 .show { display: block; padding-top: 8px; margin-bottom: 23px; }  
  
  
  
  
 .meta { font-family: Arial, Verdana, sans-serif; color: #222; font-size: 0.8em; font-weight: bold; float: right; }  
  
  
  
  
 /* clearfix */ 
  
  
  
  
 .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }  
  
  
  
  
 .clearfix { display: inline-block; }  
  
  
  
  
 html[xmlns] .clearfix { display: block; }  
  
  
  
  
 * html .clearfix { height: 1%; } 
 
 
 

此外，元信息包含在每個(gè)頭塊的HTML標(biāo)記，以節(jié)省空間。所以，我們是浮動(dòng)的內(nèi)容，并使用CSS clearfix的布局結(jié)構(gòu)。

jQuery的scrollTop

jQuery有命名.scrollTop()方法，使用這種技術(shù)，可以拉動(dòng)當(dāng)前的像素值從頁(yè)面頂部的任何其他選擇的元素。我們從列表向下滾動(dòng)，準(zhǔn)確的錨鏈接。

 
 
 
 
  
  
  
  
$(document).ready(function(){  
  
  
  
  
   $('#links > ul > li > a').on('click', function(e){  
  
  
  
  
     e.preventDefault();  
  
  
  
  
     var anchorid = $(this.hash);  
  
  
  
  
       
  
  
  
  
     if(anchorid.length == 0) anchorid = $('a[name="' + this.hash.substr(1) + '"]');  
  
  
  
  
     else anchorid = $('html');  
  
  
  
  
       
  
  
  
  
     $('html, body').animate({ scrollTop: anchorid.offset().top }, 450);  
  
  
  
  
   });  
  
  
  
  
 }); 
 
 
 

這里的indexscroller.js。它似乎沒(méi)有太多代碼，但是，讓我們看看DOM加載完成后，會(huì)發(fā)生什么情況。

#links內(nèi)部鏈接錨被點(diǎn)擊之后，我們立即調(diào)用e.preventDefault（） 。這將停止從附加到URL的頁(yè)面跳了下來(lái)瞬間的哈希值。然后使用一個(gè)新的jquery.hash屬性，我們可以確切的獲取href值后的哈希符號(hào)。因此，舉例來(lái)說(shuō)，我們的第一個(gè)索引鏈接會(huì)返回值“indexa”。

使用這種新的屬性，我們可以針對(duì)相應(yīng)的錨鏈接頁(yè)面上的name屬性相匹配。我們?cè)O(shè)置這個(gè)新anchorid的變量，使用anchorid.offset（）可以訪問(wèn)距離頂部的絕對(duì)像素。最后加入所有這些代碼到一個(gè)簡(jiǎn)單的jQuery .animate()方法。