Anchor become a really useful tool when you have to link to somewhere in a page with thousands of words, this unfortunately happen too often in corporate website.
Only problem is, an anchor is just plain bad in design, when a user click on a link he pretty much think he’s gonna go to another page, but in this case, he just jump down the content, this can be really disorienting, even for power users like us, when it is not clear if a link is an anchor and not a normal link.
How to change this behavior? Well animate the scrollbar with a simple script, it will slide down to your anchor target and your normal anchor will still work if JavaScript is turned off.
It is really easy to integrate in your website, you need no javascript knowledge.
3 simple steps to get this to work in your site:
Step 1: Plug the jquery library, and my script in your head document.
Step 2: in your anchor link add the class anchorLink <a href=”#anchorTarget” class=”anchorLink”>
Step 3: in your anchor target put an id and a name for your html anchor. <a name=”anchorTarget” id=”anchorTarget” >
And you are done, this script is free to use for whatever you see fit, juste leave my script comments as credit !
Download the souce codeView demo
It take time to maintain these javascript snippets, if you like and use the work up here, please consider buying me a beer, it’s cheap and a simple way to give back!
Comments are closed, for support please use the forums
This would work real well with the Seek Attention plugin -> http://enhance.qd-creative.co.uk/demo/seekAttention/
Excellent! It is so easy to use and so small and compact in size too!
the issue with it is that it doesn’t seem to support hitting the back button. when an anchor is used, you jump down to the section, and the url changes (to #foo) and you can then actually navigate back to the top (or wherever) by hitting back – even though you’re in the same page. it’d be great if you could get both sets of functionality in there, this is a great start!
Very true jason, i will update it this week, I alreayd know how to do it.
This functionality has been around for awhile – look at http://jquery.com/demo/thickbox/ from over a year ago.
Yea it has been around, basically it is only an animate, but I made this script so this can be easy to anyone to pick it up and work with it.
Nice work, this has come in handy in recent months… much appreciated sir!
You know there is already a blog named “position: absolute”?
http://blog.parasight.de/
but it doesn’t have the domain name “position-absolute”. so maybe you should be posting on blog.parasight.de and saying “you know there is already a blog named “position:absolute”. why would you have the blog domain name “parasight” and then name the blog something else? bizzarre…
Can’t wait for it to support back-button navigation (as Jason pointed out), because that means the anchor will also be bookmarkable, great stuff!
Thanks bro, really help me to make my site better!
This’d be great if it also added the anchor to the URL — people often want to share anchored URLs if it’s a long page like an FAQ. I assume fixing the back button problem will do this, though.
Yea it will, I already have a version that fix the bookmark, the real problem is the back button as I can’t delete the history in javascript. If I don’t find a solution by sunday I’m just gonna release the bookmark version
Yeah, this is what I wanted. Finally I found it.
I like the simplicity of this code, but am looking for an additional function. I have a page that renders its content using the jquery.xslt plugin — the content (and anchor tags in it) only are present when that plugin has finished it’s process.
I’d like to be able to click a link on one page to an anchor on another page. Any tips as to how I could accomplish that?
You could use a kind of hack, on your link in the onclick attribut, add a script that take the location.href and add a # to the end and reparse it.
In your page that receive the anchor, have a script that look at your url
Use a substring or something of this kind, to know if the last caracter is a #, if yes,
use a regular expression to find your anchor (I think maybe location.hash would work) in your location.href, animate the scrolltop, and reparse your correct url without the last caracter.
Kind of ugly i know, but that would work.
hey dude, quick question!..it seems that this feature only works when an object is positioned absolute without any overflow. Do you know any way around this?
Hey,
I’m not quite sure what your talking about, it scroll to the anchor top position document, so it may not work in a overlfow hidden div
You can contact me with your exmaple, I will have a look, cedric_dugas [at] hotmail.com
Hi! Nice script, i was looking it. Thank you.
I modified the script, so when animation ends, window adress (window.href) updates.
I paste the code, may be you want to update it.
Only added:
uri = “#”+$(this).attr(“href”).split(“#”)[1];
and
setTimeout(function()
{
window.location.href = uri;
},1200);
full code:
anchor = {
init : function() {
$(“a.anchorLink”).click(function () {
elementClick = $(this).attr(“href”)
destination = $(elementClick).offset().top;
uri = “#”+$(this).attr(“href”).split(“#”)[1];
$(“html:not(:animated),body:not(:animated)”).animate({ scrollTop: destination}, 1100 );
setTimeout(function()
{
window.location.href = uri;
},1200);
return false;
})
}
}
Bye bye and sorry about my english.
Emiliano from Argentina.
Thank you, works great, thanks for making it easy to get working quickly.
Excellent blog! Interesting article and very informative! I will necessarily subscribe for this blog. http://hiptop.ru/map.html
Really like it – works great but I’m getting a weird effect in Opera 9.6. Clicking on an anchor link at the bottom of a page to move further up a page jumps to the top and then scrolls down to the right position (bit ugly!). Happens on both Mac and PC versions. Any ideas?
I really need to work a bit on it, I would try to put an onclick=”return false;” in the tag.
Normaly this souldn’t happen as I block the normal onclick action
Look like opera might have a bug.
It doesn’t work in IE6 for me.. works great in Firefox 3.. Is this a known issue or am I doing something wrong?
‘y example work in ie6, be sure your anchor target have the same id and name attribut.
It did.. but I couldn’t get it to work anyway.. and I didn’t get any js error. Pretty strange. Must’ve been some conflict. Got it to work with a mootools script instead. Thank you anyway!
I´m looking for this effect but linking from another age.. Do you know anything like that?
I have use it on my site (wpesp.com). Thanks!!
Amazing job man!
Thank you!
First let me start by saying I really enjoy this plugin. I am a complete novice to jquery and javascript in general. After trying to use a few other overly complicated scrollers I found your site, very easy to use and great for beginners.
I do have one question, how I have my page set up is I have my links on the left of the page in a treeview type of setup. On clicking them obviously the page scrolls to the corrisponding anchor point. But sense I do have it set up in a treeview type of layout I ended up repeating the code in your script so that I have two class options for styling my links, instead of just “anchorLink”. It seems to work, but I was wondering if it really was the correct way of going about this or if there was possibly a better solution.
Below is what I did to your script, please feel free to give me your input on it:
$(document).ready(function() {
anchor.init()
});
anchor = {
init : function() {
$(“a.anchorLink”).click(function () {
elementClick = $(this).attr(“href”)
destination = $(elementClick).offset().top; $(“html:not:animated),body:not:animated)”).animate({
scrollTop: destination}, 800 );
return false;
})
$(“a.anchorLinkSub”).click(function () {
elementClick = $(this).attr(“href”)
destination = $(elementClick).offset().top;
$(“html:not(:animated),body:not(:animated)”).animate({ scrollTop: destination}, 800 );
return false;
})
}
}
As you can see nothing really special just added the “anchorLinkSub” to it, sorry if its a mess attempted to make it look better but…well dident work so well lol.
Hi Adam,
In fact you could just do this
$(”a.anchorLink,a.anchorLinkSub”).click(function () {
And Thats it.
can this script work for left to right scrolling? help !!!
Hi there,
Is it possible to do this? Thanks.
Great little script. I tried adding this scrolling function inside a div of fixed height and width with overflow:auto. The anchor links were to scroll to content inside the said div. I couldn’t get it to work
By the way, I’ve found my way to your site 3 times in the last 3 days from google – good work!
@Ioz : You would need to animate the css top position div
@John : That is weird theoretically it should work one way or the other.
Hi,
I dont know how to modified the code. I need to make it to slide to the left or right. Need help.
Thanks
Cédric,
Thanks for sharing this.
I am having a problem though.
If the name and id of the anchor have to both be “anchorTarget” to work, how can I use this with multiple anchors?
Example:
http://www.thekurtisgroup.com/ehm2/residences.php
The anchortarget stand for your target, your id doesn’t need to be anchortarget, in you case you would have 2 as name and id,
That said a number is not a valid id.
PERFECT! Thanks!
Both this and your IE 6 fixes have helped me immensely, both in less than 30 minutes.
Quite an awesome blog you have here.
Cheers Cedric, very very nice and easy.
test
Is there a way to make this slider work horizontally?
It’s possible I think, look in the code line 32 change for .offset().left;
And line 33 .animate({ scrollLeft: destination}
Yeah I tried that but it didn’t really scroll all the way to the anchor. I’m new to jQuery/javascript but I’ll try to experiment a little with the script.
Hi Dude, nice script!
quick question, how to make it with multiply anchor point?
this script seem like only work with 1 anchor point.
if i want 2,3 point? =)
thanks.
This was much needed. Great navigation tool on dynamic sites.
Very nice that it does not take location.href and add a # to the end (this causes many issues on most dynamic sites) Your script solved this. Thanks!
Hi! Great script, have been looking for something like this. Only problem is I have the anchor links in a div that is positioned on the page. Every time I click on one of the anchor links it scrolls within the div but also shifts the parent page up. Is there a way to resolve this?
Thanks!
@JUN: you would have to change your id and name on your anchor, and change your href to this name.
@jlee: I’m not quite sure what you are saying, do you have an example, you could try to delete this line in jquery.anchor.js : window.location.hash = elementClick
You are a legend. Thanks so much!… Went to buy u a beer, but the paypal took ages to load. Anyway, if you make it to Sydney, I’ll buy you 10! & I’ll look you up when I’m in Canada on my snowboard next Feb. Canadian beers R great! Thanks again mate!
Cedric, This script is awesome. I was wondering if you could help me do something different with it. I’m trying to call the anchor in a php page after condition are meet, instead of clicking on a link. I can jump to my anchor with , which doesn’t animate it. Do you, or anyone else reading this, know how to active the animation to the anchor without clicking a link?
thanks!
Hard to tell without viewing your script.
Easiest way in javascript, still put a normal link in display:none where you would normally click to slide to the anchor and in javascript/jQuery :
$(“#linkToAnchor”).trigger(“click”)