Create A Link To A Point On The Same Page And Add JQuery For Scroll Effect

We all add links to different pages both within our blogs and externally to other sites.But what about creating a link within a page, a link from one point on a page to another.This is something i often see in Help or FAQ pages, a list of the most common questions and you click on the question to jump to the answer.This way of linking within a page is actually very simple and nothing needs to be added to your template for it to work.In this post i will show you how to quickly create a simple link within pages on your blog.But as a bonus i will also show you how some jQuery can make the transition between the link and the point it leads to less of a jump and more of leisurely scroll.

Linking Within A Page

Creating Basic Links Within A Page On Your Blog

The Point we link to

We will start with the point we want the link to lead to.On the test blog this was a paragraph with a title and i added the following html to each title.<a name="paragraph1">Paragraph 1</a>

<a name="paragraph2">Paragraph 2</a>

<a name="paragraph3">Paragraph 3</a>

<a name="paragraph4">Paragraph 4</a>

<a name="end"></a>You will have noticed when you clicked the link to 'End' there was no title as with the paragraphs.You don't need to have text in the section you are linking to.

The links

The actual links users click to jump to these sections are regular hyperlinks like this with the name of the section :<a href="#paragraph1">Paragraph 1</a><a href="#paragraph2">Paragraph 2</a><a href="#paragraph3">Paragraph 3</a><a href="#paragraph4">Paragraph 4</a><a href="#end">End</a>So when you are creating your links you add the tag to the point linking to, like this :<a name="UNIQUE-NAME">TITLE</a>And you add the link like this:<a href="#UNIQUE-NAME">TITLE</a>In a FAQ type page it might look like this :<a href="#answer1">Q - How Much Does It Cost ?</a><a name="answer1">A - It's Free !</a>I think that's fairly basic and with very little effort you are linking within the page.

Adding A jQuery Scroll Effect To The Links

This is a script from Design Shack that lets us make the transition a lot better.

OK the only change to the actual links here is we add div id="linknav" to the links :

That's it, so to recap you add a 'name' to the point you want to link to, a regular hyperlink to that name and for the jQuery you add the scripts and div id.Thanks also goes to Ariel Flesler for the scrollto and and Localscroll scripts, Make sure to Check out more of our Cool jQuery Tutorials.