jQ建立按字母順序排列的友好頁面索引

作者：創想中國 2012-12-24 13:54:13

在本教程中，我將探討一個解決方案，創建一個簡單的頁面索引，并采用錨點鏈接在頁面上。"跳轉"動作進行動畫處理，向下滾動到達這個鏈接的容器。（完美兼容IE6，7，8）

大多數Web開發人員很可能很熟悉使用錨鏈接跳轉到的頁面部分的解決方案。你可以設置一個特定的name屬性的錨鏈接，并使用href值作為哈希符號來跳過頁面。這種效果當需要列出很長的數據集時，是非常實用的，比方說一個FAQ頁面，一問一答的形式經常采用這樣的效果，然而頁面跳轉對于游客來說有時候并不是好友好，因為他一點擊直接跳轉，陌生的游客對此可能感到困惑，不知道當前的數據跑那里去了，

[[106693]]

在線演示

布局

首先是基本的index.html頁面，我加入了一個典型的HTML5文檔類型。styles.css為我們的頁面樣式表,indexscroller.js自定義的jQuery代碼。

使用jquery代碼別忘記引入谷歌jquery庫，舊的瀏覽器不支持HTML5的html5shiv trunk 庫的副本。在主體部分我使用的是定制的谷歌Webfont字體，以及與一些藝術CSS3效果。

<!doctype html> 
 <html lang="en-US"> 
 <head> 
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
   <title>jQuery Alphabetical Scrolling Links Index</title> 
   <meta name="author" content="Jake Rocheleau"> 
   <link rel="shortcut icon" href="http://spyrestudios.com/favicon.ico"> 
   <link rel="icon" href="http://spyrestudios.com/favicon.ico"> 
   <link rel="stylesheet" type="text/css" href="styles.css"> 
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Milonga"> 
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
   <script type="text/javascript" charset="utf-8" src="indexscroller.js"></script> 
 <!--[if lt IE 9]> 
   <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 <![endif]--> 
 </head>

主體內容

錨鏈接的href值在頁面上按字母順序列出的目標索引。從indexa到＃indexg都針對其他頁面上錨鏈接上面的匹配的name屬性的值。

<div id="w"> 
     <H1>動態jQuery的滾動鏈接索引</ h1>      
     <div id="container"> 
       <nav id="links"> 
         <ul class="clearfix"> 
           <li class="label">快速鏈接：</ P> 
           <LI> <A href="#indexa"> A </ A> </ P> 
           <LI> <A href="#indexb"> B </ A> </ P> 
           <LI> <A href="#indexc"> C </ A> </ P> 
           <LI> <A href="#indexd"> D </ A> </ P> 
           <LI> <A href="#indexe"> E </ A> </ P> 
           <LI> <A href="#indexf"> F </ A> </ P> 
           <LI> <A href="#indexg"> G </ A> </ P> 
         </ ul> 
       </div>

下面是name為 indexb的錨鏈接的具體滾動內容：當你點擊<LI> <A href="#indexb"> B </ A> </ P> 他就會跳轉到這個地方

<div class="show">  
   <h2>Arrested Development <span class="meta"><a href="http://en.wikipedia.org/wiki/Arrested_Development_(TV_series)" target="_blank">Wikipedia</a> - <a href="http://www.imdb.com/title/tt0367279/" target="_blank">IMDB</a></span></h2>  
   <p><img src="images/arrested-development.png" alt="Arrested Development TV Show" width="570" height="280"></p>  
 </div>  
 <a name="indexb"></a>  
 <div class="show">  
   <h2>The Big Bang Theory <span class="meta"><a href="http://en.wikipedia.org/wiki/The_Big_Bang_Theory" target="_blank">Wikipedia</a> - <a href="http://www.imdb.com/title/tt0898266/" target="_blank">IMDB</a></span></h2>  
   <p><img src="images/big-bang-theory.png" alt="The Big Bang Theory TV Show" width="570" height="280"></p>  
 </div>

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標記，以節省空間。所以，我們是浮動的內容，并使用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加載完成后，會發生什么情況。

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

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

原文鏈接：http://www.cnblogs.com/58top/archive/2012/12/24/how-to-build-alphabetical-index-using-jquery.html

責任編輯：張偉來源：博客園