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




| | 30 comments

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.

So i guess we need some demo's, the first demo is the basic link.Click Paragraph 1 and you jump to paragraph 1 and so on.You will also see a link to jump to end which brings you to the end of the post.

View Demo Button

The second demo looks the very same but you will love how the jQuery has added a scroll between the link and the content.

View Demo Button

Pretty cool ehh ? Lets see how it's done

Video Tutorial - We have a video tutorial for extra help at the end of the post.

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 :

<div id="linknav">
<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>
</div>
And we add the following scripts to your blog :

Note - If you have previously added jQuery to your template remove the line in yellow before adding code to your template.

<!--start jquery from http://www.spiceupyourblog.com-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://spiceupyourblogextras.googlecode.com/files/jquery.localscroll-1.2.7-min.js' type='text/javascript'/>
<script src='http://spiceupyourblogextras.googlecode.com/files/jquery.scrollTo-1.4.2-min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#linknav&#39;).localScroll({duration:800});
});
</script>
<!--end jquery from http://www.spiceupyourblog.com-->

On Wordpress or any other platform you add this to the head section of your blog between <head> and </head>, below i have the steps for Blogger.

Step 1. In your Blogger Dashboard click Design > Edit Html

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

</head>

Step 3. Copy and Paste the following code directly Above / Before </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://spiceupyourblogextras.googlecode.com/files/jquery.localscroll-1.2.7-min.js' type='text/javascript'/>
<script src='http://spiceupyourblogextras.googlecode.com/files/jquery.scrollTo-1.4.2-min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#nav&#39;).localScroll({duration:800});
});
</script>

Step 4. Save Your Template.

Video Tutorial




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.

Drop Your Comments And Questions Below.


If You Enjoyed This Post Please Take 5 Seconds To Share It.

Stay Connected With Free Updates

Subscribe via Email

30 comments:

  1. Thanks a lot! Very helpful post, Especially for long posts.

    This is one of my favourite! =D

    ReplyDelete
  2. WoW Superb Thanks 4 Sharing...Keep it up :-)

    ReplyDelete
  3. Tania - Thanks it looks confusing so i spent some extra time trying to show how easy it actually was :D

    Ahmad and Usman - Thanks for your comments it is a useful tool to have, I'm glad you liked the post.

    ReplyDelete
  4. Hi Paul nice post that really helped can i ask you 1 question how did you put that Admin logo in your comment can you make a tutorial for that thanks

    ReplyDelete
  5. I love each and every post of yours. Keep up the Good Work. \m/

    ReplyDelete
  6. Hi Paul
    Thanks firstly for this great tutorial........... I only wish I could get it to work as I have thought before that anchor links to text would be a bonus on blogger.

    Everytime I enter the data for the basic one and then click on the link once published it goes to my edit new post page on blogger. Blogger seems to have placed a link to my dashboard post ID in the first set of code in the html.

    When I look at your video my html looks very different to yours - I've got span and divs all over the place.

    Have you any guidance on where I am going wrong?

    ReplyDelete
  7. Rosie - I am fairly sure i know what is causing the problem.When you add the link in the html mode of your post editor if you click compose Blogger will automatically fill the link.Basically add the link just as you are about to publish the post and don't click compose after the link is added.So you will be still in html mode when you click publish.Let me know if that's it...

    ReplyDelete
    Replies
    1. Awesome, I had the same problem she did and now I fixed it :)

      Delete
  8. im looking for this since long time ago..ahaha.. OMG, I love You, Bro!

    ReplyDelete
  9. @ Muxlimo - Glad you found it :D

    ReplyDelete
  10. Thanks Paul for the tip - I think the problem must be in compose. I'll try it again over the weekend and let you know if it works or not. Thanks again.

    ReplyDelete
  11. Hi,

    I've done this for the alphabet on this page of my blog http://memylocsandi.blogspot.com/p/locticians.html

    I've saved it as html & it worked. It's only after I've saved it & gone back in to change something else that it changes the links to go to my edit page!

    I'm not even touching that part of the page so I don't know why it's doing this.

    Also once that's done I want to make the font large, but if I do that then it changes it again!

    How can I get everything the way I want it? This page will be continuously updated as well, so I need to be sure it won't do this again.

    Please help me....

    ReplyDelete
  12. @ Champagne - The problem was when you edited the post you viewed in compose mode.You need to add the links and publish in edit html mode.As soon as you click compose mode the URL of the current page (Edit Post URL) is inserted into the links.

    ReplyDelete
    Replies
    1. Sorry for the late response, will try this now & let you know if I'm successful. Thanks

      Delete
  13. AT LAST.. I DID IT!!! Yeeehaawww!!! XD

    ReplyDelete
  14. Ugh!! i did same mistake with champagne..>.<' how to fix it, Bro??

    ReplyDelete
  15. Cheers for the post. Just a quick question that Champagne and Rosie touched on. Is there any way to edit your post after inserting the html code?

    For example, I want my post to read:
    blah blah blah click here

    but instead it reads:
    blah blah blah click
    here

    where 'here' is the link word to the link lower down my post. If I go into compose mode, the link switches as you mentioned but to have that one word on the wrong line doesn't look very good. The same could be said if I wanted to use a word in the middle of a paragraph to link to lower down the page, it
    'would'
    end up looking like this which again does not make the overall post look good.
    I would appreciate any help on the matter.

    Cheers,
    James

    ReplyDelete
  16. @ James - When you click edit post or new post the post editor will be in the format you used last.So basically if you are in html mode and you publish a post when you next use the post editor it will be in html and visa versa.So if you last used html mode then you could edit a post with these links and make changes.I think it would be easier to just edit the post in compose and fix the links in html before publishing :D

    ReplyDelete
  17. Hi Paul...Thanks for the DEMO...very USefull...could you explain the same procedure through a video on how to link with in the blog main page....I mean not in the post but on the main page...Thanking you in Advance..good work...

    ReplyDelete
  18. @ Mr.Free - It works the very same way on the home page or any page, you create the link in the same way.

    ReplyDelete
  19. Thanks so much it's really help.
    i saw same thing in one site in F.A.Q selection and each category have back to top option.for example back to Paragraph 1,back to Paragraph 2

    can you please tell how to add this thing also?

    Thanks

    ReplyDelete
  20. It sucks how bloggers dummy proof editor changes the links if you click compose before I save.

    This is a great function for a regular webpage but because of the way the editor assumes it's a mistake, it's not worth it for blogger.

    I spent 20 minutes adding the links just to have them changed by the editor. I did this twice before I realized what was happening.

    Thanks for the info, I'm sure it will come in handy in a future self built webpage.

    ReplyDelete
  21. hello, what if I'll be using an image? Is this possible? Thank you.

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. Hey Paul great tip but I have a problem. I use jQuery Fade in scroll to top button too so when I copy this code right above the code < /head > , the back to top button doesn't work anymore. Any help please?

    ReplyDelete
  24. thanks this is what i m finding

    ReplyDelete
  25. Thank you so much! Been trying to find a way to do this for ages :)

    ReplyDelete
  26. Hi Paul
    Love your site and really appreciate the way you put forward information. I have been fooling around trying to create internal links and visited many sites without much luck. Your finally offered me some satisfaction. Maybe you can help solve a problem. If I add these internal links and go back and edit my post at some point the links no longer work. I find I have to publish the post and use the published link in href section for it to be permanent. Any thoughts on this!
    Thanks Richard

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us