jQuery建立了一个字母友好的页面索引(兼容IE6/7/8)

大多数网络开发人员可能都熟悉使用锚链接跳转到页面部分的解决方案。您可以为特定的名称属性设置一个锚点链接，并使用href值作为哈希符号来跳过页面。当需要列出长数据集时，这种效果非常实用。例如，常见问题页面经常以问答的形式采用这种效果。但是，对于游客来说，有时候一个页面跳转还不如一个朋友，因为当他直接点击跳转的时候，陌生的游客可能会一头雾水，想知道当前的数据去了哪里。在本教程中，我将探索一个解决方案，创建一个简单的页面索引，并用锚点将其链接到页面上。“跳转”动作被动画化并向下滚动以到达该链接的容器。(与IE6、7和8完美兼容)

在线演示的布局是基本的index.html页面，我添加了一个典型的HTML5文档类型。Styles.css是我们的页面样式表，由indexscroller.js定制的jquery代码使用jQuery代码，别忘了介绍一下Google jquery库。旧浏览器不支持HTML5 html5shiv中继线库的副本。在主要部分，我使用了定制的谷歌网页字体，以及一些艺术的CSS3效果。复制代码如下：doctype html html lang=' en-US ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' titlejQuery字母滚动链接索引/title meta name=' author ' content=' Jake Rocheleau ' link rel='快捷图标' href=' http://spyrestudios.com/fav icon . ico ' link rel=' icon ' href=' http://spyrestudios.com/fav icon . ico ' link rel='样式表' type='text/css' href=' styles . CSS ' link rel='样式表' type=' text/CSS ' href='family=Milonga ' script type=' text/JavaScript ' src=' http :https://Ajax . googleapis.com/Ajax/libs/jquery/1 . 8 . 3/jquery . min . js '/script script type=' text/JavaScript ' charset=' utf-8 ' src=' http : indexscroller . js '/script！- [if lt IE 9]脚本类型=' text/JavaScript ' src=' http :http://html 5 shiv . googlecode.com/SVN/trunk/html 5 . js '/脚本！[[endif] - /head主内容锚点链接的href值是页面上按字母顺序列出的目标索引。Indexa到# #indexg都是针对其他页面上锚点链接上方匹配名称属性的值。

复制代码代码如下：分区id=H1西部动态jQuery的滚动链接索引/h1 div id=' container ' nav id=' links ' ul class=' clear fix ' Li class=' label '快速链接：/P阿利A/A/P阿利href='#indexb' B/A/P阿利href='#indexc' C/A/P阿利href='#indexd' D/A/P阿利href='#indexe' E/A/P阿利href='#indexf' F/A/P阿利G/A/P/ul /div下面是名字为指数b的锚链接的具体滚动内容：当你点击阿利P他就会跳转到这个地方复制代码代码如下H2发展受阻表演。维基百科。org/wiki/Arrested _ Development _(TV _ series)' target=' _ blank ' Wikipedia/a-a href=' http://www .IMDB。com/title/TT 0367279/png ' alt='发展受阻电视台页面样式一些默认的样式表的内容。除了典型的半铸钢钢性铸铁(铸造半钢)重置我用的是CSS3阴影复制代码代码如下：/* 页面主要样式布局*/# w { width : 620 px；margin: 0自动衬垫-top : 55px；} #容器{ padding: 14px 20px背景# fff-web kit-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)；-web套件-边框-半径： 5px-moz-border-radius : 5px；边界半径： 5px}在每个锚链接停止之前，在他的顶部设置一个填充-top:8px的大小。这样，我们的滚动效果不停止在每个标题的顶部，有一些额外的空白复制代码代码如下：/* 具体的每个跳转到锚链接的样式DIV */#显示{显示：块；} .显示{显示：块；填充-top : 8px；保证金-底部： 23像素；} .meta { font-family: Arial，Verdana，sans-serif；color : # 222 font-size : 0.8 em；字体粗细：粗体；向右浮动：}/*清除修复*/。清除修复程序：在{ content:}之后；显示器：块；clear:两者；可见性：隐藏；线高： 0;高度： 0;} .clearfix { display:内联块；} html[xmlns].clearfix { display:块；} * html .清除固定{高度：1%；}此外，元信息包含在每个头块的超文本标记语言标记，以节省空间。所以，我们是浮动的内容，并使用CSS clearfix的布局结构jQuery。的scrollTopjQuery有命名scrollTop()方法，使用这种技术，可以拉动当前的像素值从页面顶部的任何其他选择的元素。我们从列表向下滚动，准确的锚链接。复制代码代码如下：美元（文件)。ready(function(){ $(' # link ul阿利')。打开('点击')，函数(e){ e . prevent default()；var anchorid=$(这。哈希)；if(锚id。长度==0)锚点id=$(' a[name=' this。哈希。substr(1)' ']')；else anchorid=$(' html ')；$('html，body ').制作动画({ scrollTop: anchorid.offset().top }，450)；});});这里的indexscroller.js。它似乎没有太多代码，但是，让我们看看数字正射影像图加载完成后，会发生什么情况#链接内部链接锚被点击之后，我们立即调用e.preventDefault()。这将停止从附加到统一资源定位器的页面跳了下来瞬间的哈希值。然后使用一个新的jquery.hash属性，我们可以确切的获取href值后的哈希符号。因此，举例来说，我们的第一个索引链接会返回值索引a。使用这种新的属性，我们可以针对相应的锚链接页面上的名字属性相匹配。我们设置这个新锚定的变量，使用anchorid.offset()可以访问距离顶部的绝对像素。

最后，将这些代码添加到一个简单的jQuery中。animate()方法。

在线演示