jQuery建立一個按字母順序排列的友善頁面索引(相容IE6/7/8)_jquery

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

在本教學中，我將探討一個解決方案，建立一個簡單的頁面索引，並採用錨點連結在頁面上。 "跳轉"動作進行動畫處理，向下捲動到達這個連結的容器。 （完美相容IE6，7，8）

線上示範

版面

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

使用jquery程式碼別忘記引入Googlejquery庫，舊的瀏覽器不支援HTML5的html5shiv trunk 庫的副本。在主體部分我使用的是客製化的GoogleWebfont字體，以及與一些藝術CSS3效果。

複製程式碼 程式碼如下:

主體內容

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

複製程式碼

代碼如下:



代碼="w">

動態jQuery的滾動連結索引 h1>

• 快速連結： P>
  
• A A> P >
  
• B A> P>
  
• C A> P>
  
• D A> P>
  
• E A> P>
  
• F A> P>

G A> P>
ul>

以下是name為indexb的錨鏈接的具體滾動內容：當你點擊

B A > P> 他就會跳到這個地方

複製程式碼 程式碼如下:

發展受阻維基百科 - IMDB

生活大爆炸 維基百科 - IMDB

CSS 頁面樣式

一些預設樣式表的內容。除了典型的CSS 重置之外，我用的是CSS3 遮光

複製代碼代碼如下:

/* 頁面主要樣式佈局*/
#w { width: 620px;保證金：0 自動；頂部填充：55px; }

#container {
內邊距：14px 20px ;
背景：#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);
盒子陰影：2px 2px 1px rgba(0,0,0,0.35);
-webkit-border-radius: 5px;
-moz-border-radius: 5px ;
邊框半徑：5px;
}

每個在某個標題停止連結之前，在他的頂部設定一個padding-top:8px的大小。這樣，我們的滾動效果就不會在每個標題的頂部停止，還有一些額外的空白

複製代碼代碼如下：

/*各個每個跳到連結的樣式DIV */
#shows { display: block; }

.show { 顯示：區塊；頂部填充：8px；下邊距：23px； }
.meta { 字體系列：Arial、Verdana、sans-serif；顏色：#222；字體大小：0.8em；字體粗細：粗體；浮動：右； }

/* clearfix */
.clearfix:after { content: ".";顯示：塊；明確：兩者；可見性：隱藏；行高：0；高度：0； }
.clearfix { 顯示：內聯區塊； }

html[xmlns] .clearfix { 顯示：區塊； }
* html .clearfix { 高度：1%; }

另外，元資訊包含在每個頭塊的HTML 標記中，以節省空間。所以，我們是浮動的內容，並使用 CSS clearfix 的佈局結構。

jQuery 的scrollTop

jQuery有命名.scrollTop()方法，使用這種技術，可以從頁面頂部的任何其他選擇的元素拉動當前的像素值。我們從列表升級，準確的附屬連結。

複製程式碼程式碼如下：

$(document).ready(function() 🎜>$(' #links > ul > a').on('click', function(e){
e.preventDefault();
var anchorid = $(this.hash);

if(anchorid.length == 0)anchorid = $('a[name="' this.hash.substr(1)'"]');
elseanchorid = $('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()方法

線上示範