HTML anchor Click to jump to the specified location on the page.

Originally was looking at Nandashin write Ajax tutorial, suddenly found that clicking on the directory text will jump to the corresponding text content, thus stimulated my interest.

This exactly how to do, just start to look at the time of smattering, find Niang is: "Click to jump to the page to specify the location", looked for the next, the original professional terminology called: Anchor point.

Degree Niang is really a profound place, has a variety of methods can be used.

One of the simplest:

Set the anchor point of a tag on the line, but there is a certain link will change, not conducive to refreshing

<divclass="Skip"Id="Skip"> "#toc0" class="AAA"> Click the text to jump </a> <!--The value of the Herf must be with the # number and match the value that corresponds to the jump-</li> </ul> <divclass="Chapter"style="margin-top:850px;"> <a name="toc0" class="Aaa1"> Text jump to Here </a> <!--The A tag here can also be used with the name id--> <p>mood false mood fake mood false mood false mood false mood fake mood false mood false mood false mood false mood fake mood false mood false mood fake mood false mood false mood fake mood false mood fake mood leave</p> </div></div>

The second method is to move according to the method of animate

Animate (params, [Duration], [easing], [Callback])

Create custom animations, note: All specified properties must be in camel form, such as marginleft instead of Margin-left.

Example:

//apply three types of effects in one animation at the same time$("#go"). Click (function () {$ ("#block"). Animate ({width:"90%", Height:"100%", FontSize:"10em",//Hump borderWidth:Ten  },  + );});

Remove the a tag from the HTML above #toc0

JS Code

$ (". AAA"). Click (function () {    $ ('html,body' ). Animate ({        scrolltop:$ (". Aaa1"). Offset (). Top},{duration:  easing:'swing'});     return false ;})

The above summary of the two are commonly used and compatible with the relatively good, relatively simple

can also refer to a complex case

Http://www.jb51.net/article/96574.htm

Http://bbs.csdn.net/topics/390960199?page=1

HTML anchor Click to jump to the specified location on the page.