Most web developers are likely to be familiar with the solution that uses the page portion of the anchor chain to jump to. You can set the anchor connection for a specific name property and use the HREF value as the hash symbol to skip the page. This effect, when you need to list a very long dataset, is very practical, such as a FAQ page, a question in the form of often use this effect, but the page jump for visitors sometimes is not good friendly, because he clicks directly to jump, unfamiliar visitors to this may be confused, Do not know the current data ran there,
In this tutorial, I'll explore a solution, create a simple page index, and use an anchor link on the page. The jump action is animated, scrolling down to the container of the link. (Perfect compatible ie6,7,8)
Online Demo
Layout
The first is the basic index.html page, and I've added a typical HTML5 document type. Styles.css for our page style sheet, indexscroller.js custom jquery code.
Use jquery code to not forget to introduce Google jquery Library, the old browser does not support HTML5 Html5shiv Trunk library copy. In the main part I am using custom Google Webfont fonts, as well as with some artistic CSS3 effects.
Copy Code code as follows:
<!doctype html>
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
<title>jquery Alphabetical scrolling Links index</title>
<meta name= "Author" content= "Jake Rocheleau" >
<link rel= "shortcut icon" href= "Http://spyrestudios.com/favicon.ico" >
<link rel= "icon" href= "Http://spyrestudios.com/favicon.ico" >
<link rel= "stylesheet" type= "Text/css" href= "Styles.css" >
<link rel= "stylesheet" type= "Text/css" href= "Http://fonts.googleapis.com/css?family=Milonga" >
<script type= "Text/javascript" src= "Https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" >< /script>
<script type= "Text/javascript" charset= "Utf-8" src= "Indexscroller.js" ></script>
<!--[If Lt IE 9]>
<script type= "Text/javascript" src= "Http://html5shiv.googlecode.com/svn/trunk/html5.js" ></script>
<! [endif]-->
Subject Content
The target index on the page that is listed alphabetically by the HREF value of the anchor chain. The value of the matching name attribute from Indexa to #indexg for anchor cable on other pages.
Copy Code code as follows:
<div id= "W" >
<H1> dynamic jquery's scrolling link index
<div id= "Container" >
<nav id= "Links" >
<ul class= "Clearfix" >
<li class= "label" > Quick Links: </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 named Indexb: When you click <LI> <a href= "#indexb" > B </a> </p> He will jump to this place
Copy Code code as follows:
<div class= "Show" >
<p></p>
</div>
<a name= "Indexb" ></a>
<div class= "Show" >
<p></p >
</div>
CSS Page Styles
The contents of some default style sheets. In addition to the typical CSS reset, I'm using a CSS3 shadow.
Copy Code code as follows:
/* page main style layout * *
#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;
}
Before each anchor cable is stopped, set a padding-top:8px size on top of him. In this way, our scrolling effect does not stop at the top of each header, there are some extra blanks
Copy Code code as follows:
/* Specific each jump to the anchor style 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%}
In addition, the meta information is contained in the HTML tags of each header block to save space. So we are floating the content and using the CSS clearfix layout structure.
The scrolltop of jquery
jquery has a named. ScrollTop () method, which enables you to pull the current pixel value from any other selected element at the top of the page. We scroll down from the list, and the exact anchor is connected.
Copy Code code as follows:
$ (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);
});
});
Here's the indexscroller.js. It doesn't seem to have much code, but let's see what happens when the DOM is loaded.
#links内部链接锚被点击之后, we call E.preventdefault () immediately. This will stop the hash value from jumping down from the page attached to the URL. Then using a new Jquery.hash property, we can get exactly the hash symbol after the href value. So, for example, our first index link returns the value "Indexa".
With this new property, we can match the Name property on the corresponding anchor page. We set this new Anchorid variable, using Anchorid.offset () to access the absolute pixel at the top of the distance. Finally add all this code to a simple jquery. Animate () method
Online Demo
