快捷導(dǎo)航

jQuery建立一個(gè)按字母順序排列的友好頁(yè)面索引(兼容IE6/7/8)

更新時(shí)間：2013年02月26日 14:40:42 作者：

很多人熟悉使用錨鏈接跳轉(zhuǎn)到的頁(yè)面部分的解決方案,這種效果當(dāng)需要列出很長(zhǎng)的數(shù)據(jù)集時(shí)，是非常實(shí)用的,然而頁(yè)面跳轉(zhuǎn)對(duì)于游客來(lái)說(shuō)有時(shí)候并不是好友好，弊端我就不多說(shuō)了，祥看下本文

大多數(shù)Web開發(fā)人員很可能很熟悉使用錨鏈接跳轉(zhuǎn)到的頁(yè)面部分的解決方案。你可以設(shè)置一個(gè)特定的name屬性的錨鏈接，并使用href值作為哈希符號(hào)來(lái)跳過(guò)頁(yè)面。這種效果當(dāng)需要列出很長(zhǎng)的數(shù)據(jù)集時(shí)，是非常實(shí)用的，比方說(shuō)一個(gè)FAQ頁(yè)面，一問一答的形式經(jīng)常采用這樣的效果，然而頁(yè)面跳轉(zhuǎn)對(duì)于游客來(lái)說(shuō)有時(shí)候并不是好友好，因?yàn)樗稽c(diǎn)擊直接跳轉(zhuǎn)，陌生的游客對(duì)此可能感到困惑，不知道當(dāng)前的數(shù)據(jù)跑那里去了，

在本教程中，我將探討一個(gè)解決方案，創(chuàng)建一個(gè)簡(jiǎn)單的頁(yè)面索引，并采用錨點(diǎn)鏈接在頁(yè)面上。"跳轉(zhuǎn)"動(dòng)作進(jìn)行動(dòng)畫處理，向下滾動(dòng)到達(dá)這個(gè)鏈接的容器。（完美兼容IE6，7，8）

預(yù)覽演示截圖jQuery的Javascript的滾動(dòng)索引頁(yè)鏈接

在線演示

布局

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

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

復(fù)制代碼代碼如下:

<!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" > 
<link rel="icon" > 
<link rel="stylesheet" type="text/css" href="styles.css"> 
<link rel="stylesheet" type="text/css" > 
<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>

主體內(nèi)容
錨鏈接的href值在頁(yè)面上按字母順序列出的目標(biāo)索引。從indexa到＃indexg都針對(duì)其他頁(yè)面上錨鏈接上面的匹配的name屬性的值。

復(fù)制代碼代碼如下:

<div id="w"> 
<H1>動(dòng)態(tài)jQuery的滾動(dòng)鏈接​​索引</ 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的錨鏈接的具體滾動(dòng)內(nèi)容：當(dāng)你點(diǎn)擊<LI> <A href="#indexb"> B </ A> </ P> 他就會(huì)跳轉(zhuǎn)到這個(gè)地方

復(fù)制代碼代碼如下:

<div class="show"> 
<h2>Arrested Development <span class="meta"><a  target="_blank">Wikipedia</a> - <a  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  target="_blank">Wikipedia</a> - <a  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頁(yè)面樣式

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

復(fù)制代碼代碼如下:

/* 頁(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)題的頂部，有一些額外的空白

復(fù)制代碼代碼如下:

/* 具體的每個(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)確的錨鏈接。

復(fù)制代碼代碼如下:

$(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加載完成后，會(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（）可以訪問距離頂部的絕對(duì)像素。最后加入所有這些代碼到一個(gè)簡(jiǎn)單的jQuery .animate()方法

jQuery的的scrollTop的滾動(dòng)指數(shù)錨鏈接

在線演示

您可能感興趣的文章: