当前位置:Gxlcms > JavaScript > jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)_jquery

jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)_jquery

时间:2021-07-01 10:21:17 帮助过:6人阅读

大多数Web开发人员很可能很熟悉使用锚链接跳转到的页面部分的解决方案。你可以设置一个特定的name属性的锚链接,并使用href值作为哈希符号来跳过页面。这种效果当需要列出很长的数据集时,是非常实用的,比方说一个FAQ页面,一问一答的形式经常采用这样的效果,然而页面跳转对于游客来说有时候并不是好友好,因为他一点击直接跳转,陌生的游客对此可能感到困惑,不知道当前的数据跑那里去了,

在本教程中,我将探讨一个解决方案,创建一个简单的页面索引,并采用锚点链接在页面上。"跳转"动作进行动画处理,向下滚动到达这个链接的容器。(完美兼容IE6,7,8)

预览演示截图jQuery的Javascript的滚动索引页链接

在线演示

布局

首先是基本的index.html页面,我加入了一个典型的HTML5文档类型。styles.css为我们的页面样式表,indexscroller.js自定义的jQuery代码。

使用jquery代码别忘记引入谷歌jquery库,旧的浏览器不支持HTML5的html5shiv trunk 库的副本。在主体部分我使用的是定制的谷歌Webfont字体,以及与一些艺术CSS3效果。

代码如下:





jQuery Alphabetical Scrolling Links Index