Most Web developers are likely to be familiar with the solution for 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.
Copy codeThe Code is as follows: <! Doctype html>Subject content
The href value of the anchor link is the target index listed in alphabetical order on the page. From indexa to # indexg, the value of the name attribute that matches the climbing link on other pages.
<Div id = "container">
<Nav id = "links">
<Ul class = "clearfix">
<Li class = "label"> quick link: </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>
The following is the specific scrolling content of the anchor link whose name is indexb: click <LI> <A href = "# indexb"> B </A> </P>.Copy codeThe Code is as follows: <div class = "show">
<H2> Arrested Development <span class = "meta"> <a href = "http://en.wikipedia.org/wiki/Arrested_Development_ (TV _series) "target =" _ blank "> Wikipedia </a>-<a href =" http://www.imdb.com/title/tt0367279/ "target =" _ blank "> IMDB </a> </span> <P> </p>
</Div>
<A name = "indexb"> </a>
<Div class = "show">
<H2> The Big Bang Theory <span class = "meta"> <a href = "http://en.wikipedia.org/wiki/The_Big_Bang_Theory" target = "_ blank"> Wikipedia </a>-<a href =" http://www.imdb.com/title/tt0898266/ "target =" _ blank "> IMDB </a> </span> <P> </p>
</Div>
CSS Page Style
The content of some default style sheets. Besides the typical CSS resetting, I use CSS3 shadow.
Copy codeThe Code is as follows:/* main page style layout */# Container {
Padding: 14px 20px;
Background: # fff;
-Webkit-box-shadow: 2px 2px 1px rgba (0.35, 0 );
-Moz-box-shadow: 2px 2px 1px rgba (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;
}
Before each anchor is stopped, set a padding-top: 8px size on the top of the anchor. In this way, our rolling effect does not stop at the top of each title, and there are some additional blank spaces.Copy codeThe Code is as follows:/* The specific style DIV for each jump to the anchor link */
# 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% ;}
In addition, metadata is contained in the HTML Tag of each header block to save space. Therefore, we use floating content and the CSS clearfix layout structure.
ScrollTop of jQuery
JQuery has the name. scrollTop () method. This technique can be used to pull the current pixel value from any other selected element on the top of the page. We scroll down from the list to provide accurate anchor links.
Copy codeThe Code is as follows: $ (document). ready (function (){If (anchorid. length = 0) anchorid = $ ('a [name = "'+ this. hash. substr (1) +'"] ');
Else anchorid = $ ('html ');
$ ('Html, body'). animate ({scrollTop: anchorid. offset (). top}, 450 );
});
});
Here indexscroller. js. It does not seem to have much code, but let's see what happens after the DOM is loaded.
# After the internal link anchor of links is clicked, we call e. preventDefault () immediately (). This will stop the page appended to the URL from jumping off the instantaneous hash value. Then, we can use a new jquery. hash attribute to obtain the hash symbol after the href value. Therefore, for example, the first index link returns "indexa ".
With this new attribute, we can match the name attribute on the corresponding anchor page. We set this new anchorid variable and use anchorid. offset () to access the absolute pixel from the top. Finally, add all the code to a simple jQuery. animate () method.
Online Demo
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
