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.
The second demo looks the very same but you will love how the jQuery has added a scroll between the link and the content.
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 :
And we add the following scripts to your blog :<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>
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() {
$('#linknav').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
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() {
$('#nav').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.
Join over 5000 Subscribers! Please sign up to receive Updates.
SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.
Thanks a lot! Very helpful post, Especially for long posts.
ReplyDeleteThis is one of my favourite! =D
WoW Superb Thanks 4 Sharing...Keep it up :-)
ReplyDeleteexcellent explanation
ReplyDeleteTania - Thanks it looks confusing so i spent some extra time trying to show how easy it actually was :D
ReplyDeleteAhmad and Usman - Thanks for your comments it is a useful tool to have, I'm glad you liked the post.
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
ReplyDeleteI love each and every post of yours. Keep up the Good Work. \m/
ReplyDeleteHi Paul
ReplyDeleteThanks 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?
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...
ReplyDeleteAwesome, I had the same problem she did and now I fixed it :)
Deleteim looking for this since long time ago..ahaha.. OMG, I love You, Bro!
ReplyDelete@ Muxlimo - Glad you found it :D
ReplyDeleteThanks 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.
ReplyDeleteHi,
ReplyDeleteI'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....
@ 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.
ReplyDeleteSorry for the late response, will try this now & let you know if I'm successful. Thanks
DeleteAT LAST.. I DID IT!!! Yeeehaawww!!! XD
ReplyDeleteUgh!! i did same mistake with champagne..>.<' how to fix it, Bro??
ReplyDeleteah, i fixed it.. :D
ReplyDeleteCheers 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?
ReplyDeleteFor 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
@ 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
ReplyDeleteHi 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@ Mr.Free - It works the very same way on the home page or any page, you create the link in the same way.
ReplyDeleteThanks so much it's really help.
ReplyDeletei 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
It sucks how bloggers dummy proof editor changes the links if you click compose before I save.
ReplyDeleteThis 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.
hello, what if I'll be using an image? Is this possible? Thank you.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHey 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?
ReplyDeletethanks this is what i m finding
ReplyDeleteThank you so much! Been trying to find a way to do this for ages :)
ReplyDeleteHi Paul
ReplyDeleteLove 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