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

 
 
 
 
  
  
  
  
  
  
  
  
  
   
Arrested Development IMDB
  
  
  
  
  
   
  
  
  
  
  
 

CSS頁面樣式

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

 
 
 
 
  
  
  
  
/* 頁面主要樣式布局 */ 
  
  
  
  
 #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;  
  
  
  
  
 } 
 
 
 

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

 
 
 
 
  
  
  
  
/* 具體的每個跳轉到錨鏈接的樣式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%; } 
 
 
 

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

jQuery的scrollTop

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

 
 
 
 
  
  
  
  
$(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。它似乎沒有太多代碼，但是，讓我們看看DOM加載完成后，會發(fā)生什么情況。

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

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