jQuery creates an alphabetical friendly page index (compatible with IE6/7/8)_jquery

Most web developers are likely familiar with the solution of using anchor links to jump to portions of the page. You can set a specific name attribute of the anchor link and use the href value as a hash symbol to skip pages. This effect is very practical when you need to list a long data set. For example, a FAQ page. This effect is often used in the form of questions and answers. However, page jumps are sometimes not good friends for visitors. Well, because it jumps directly with one click, unfamiliar visitors may be confused by this and don’t know where the current data goes,

In this tutorial, I will explore a solution to create a simple page index and employ anchor links on the page. The "jump" action animates scrolling down to the link's container. (Perfectly compatible with IE6, 7, 8)

Online demo

Layout

First is the basic index.html page, I added a typical HTML5 document type. styles.css is our page style sheet and indexscroller.js is the customized jQuery code.

Don’t forget to introduce the Google jquery library when using jquery code. Old browsers do not support HTML5’s copy of the html5shiv trunk library. In the main body I'm using a custom Google Webfont, along with some artistic CSS3 effects.

Copy code The code is as follows:

< ;title>jQuery Alphabetical Scrolling Links Index

Body content
The href value of the anchor link targets listed in alphabetical order on the page index. From indexa to #indexg all refer to the matching name attribute value on the anchor link on other pages.

Copy code The code is as follows:

Dynamic jQuery scrolling link index

• Quick links:
  
• A
  
• B
  
• C
  
• D
  
• E
  
• F
  
• G
  

The following is the specific scrolling content of the anchor link named indexb: When you click

B He will jump to this place

Copy the code The code is as follows:

Arrested Development Wikipedia - IMDB

The Big Bang Theory Wikipedia - IMDB

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 here. It doesn't seem like much code, but let's see what happens after the DOM is loaded.

#links Immediately after the internal link anchor is clicked, we call e.preventDefault(). This will stop the hash from jumping down instantly from the page appended to the URL. Then using a new jquery.hash attribute, we can exactly get the hash symbol after the href value. So, for example, our first index link would return the value "indexa".

Using this new attribute, we can match the name attribute on the corresponding anchor link page. We set a variable for this new anchorid, using anchorid.offset() to access the absolute pixels from the top. Finally add all this code into a simple jQuery .animate() method

Online demo

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn