JQuery creates a friendly page index in alphabetical order (compatible with IE6/7/8) _ jquery

Many people are familiar with the solution of using the anchor link to jump to the page. This effect is very practical when a long data set needs to be listed, however, page Jump is sometimes not a good friend for tourists, so I will not talk about the disadvantages, according to Xiang, most Web developers in this article are likely to be familiar with the solution of using the anchor link to jump to the page. You can set an anchor link for a specific name attribute and use the href value as a hash symbol to skip the page. This effect is very useful when a long data set needs to be listed. For example, this effect is often used on an FAQ page in the form of a question and answer, however, page Jump is sometimes not a good friend for tourists, because when they click to jump directly, unfamiliar tourists may be confused about this and do not know where the current data is going,

In this tutorial, I will explore a solution, create a simple page index, and use the anchor link on the page. The "jump" action is animated and scroll down to the container of this link. (Compatible with IE6)

Online Demo

Layout

The first step is the basic index.html page. I have added a typical HTML5 document type. Styles.css is the jQuery code customized by indexscroller. js for our page style sheet.

When using jquery code, do not forget to introduce the Google jquery library. The old browser does not support copies of html5shiv trunk Library. In the main part, I used custom Google Webfont fonts and some artistic CSS3 effects.

The Code is as follows:

JQuery Alphabetical Scrolling Links Index