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
Awesome! Thanks so much.
It’s not working in Safari 3.2.1 though.
Awesome
Does this work with jQuery 1.3? Doesn’t seem like it. I love how light weight this is I’d love to use it. Is there any modifications I can make to make it work with jQuery 1.3?
I just tested and replaced de jquery file and it worked with jquery 1.3
Thanks, this is useful. When you gonna be around Central Europe, mail to stewwwie@gmail.com and I’ll buy you few beers
– sry, cannot use PayPal…
Thank you very much for this usefull tips i will surely use it somehow,
effort really appreciated. nad i will contact and link you when used.
Thanks again
Thanks for the turorial! This worked much better than the ’scrollTo’ I was trying to use. When I clicked to view your demo it takes me to:
http://www.position–relative.net/creation/anchor/
In case that doesn’t display, it takes me to position–relative[dot]com
(note the two – - )
Err, I should also mention that it’s in the first “View Demo” link. Also, I misspelled ‘tutorial’
Simple question: Is there a chance to make noConflict version of the script? If is jquery loaded in noConflict mode, script doesn’t work…
Thank you again!
(you know, trouble is that wordpress was updated to 2.8 and started to defaulty load jQuery 1.3.2 in noConflict mode, since that day all themes, using your script doesn’t work – look for example at http://www.wpesp.com and click on any menu)
Thank you very much!
This is so great and simple. Thanks for sharing!
Thank you very much man
It dosent work, what a shame
I am searching a script like this for horizontal scrolling. Is it also possible?
If you’re interested, I’ve turned this into a plugin : http://github.com/vanntastic/jquery-slide/tree/master
Mine isn’t sliding. Just go straight to the target place. Why?
Great! Thanks!
Awesome, you’ve been stumbled. So much better then the stupid scrollTO plugin.
This is great. Many thanks
thank you, helped me a lot
Is this function posible to function only inside a scrolable div instead of the whole page ?
Could be, try to change the html,body target for the div #ID
Hey Cedric thank you for your quick reply.
I am a bit confused about what you said. “Change the html,body target for the div #ID”.
What #ID the actual scrollable div ?. Change both the html & the body to have the same #ID as the scrollable div or can it be one of the two ?. By html,body target do you mean target=”scrollable div #id?”
I have a bunch of Information in 1 div that will be scrollable. I would like to have a set of anchor names that would lead the reader to the tittle of each section.
My problem is that It moves the entire page down. I would like for it to be the scrollable dive that scrolls down while still allowing the viewer to see the top navigation and such.
Thank you for your attention.
I am trying to get this to scroll to the anchor but leave about 45px margin at the top. Is there a way to get this working? I have tried adding margin to the top, padding, and even adding padding and margin to the wrapper. Still nothing seems to work. Any ideas?
In the javascript, add 45 at the formula
Works great in HTML but when converting to a wordpress theme it doesnt!
The demo works fine for me in Firefox, but when I try to use it on my site it just won’t work. I’ve checked the source file of the demo and done everything exactly as it’s done in there, and still it won’t work. Any ideas? It’s very frustrating.
Never mind. You have to call the JS in a specific order, which I didn’t know. Anchor script first, JQuery second.
Great script, I really enjoy using it!
I tried to make the anchorLink scroll to a margin of -45px, but I doesn’t seems to work.
In one of your previous comments you said to “In the javascript, add 45 at the formula” but as I’m a complete beginner with javascript, I don’t know were to place it in the code.
I am trying to get this to scroll to the anchor but leave about 30px margin at the top. I tried to add 30 in the javascript, but it doesn’t seem to work.
As I am a complete beginner in Javascript can you tell me to where to add the value?
thnx in advance for the help!
^ forgot to delete the first part of the message, sorry
any way to make this go horizontal instead of vertical?
This works great!
When my page opens it jump to a position, with this code: onload=”window.scrollTo(0,250)
But can i get the smooth effects with your javascript, so when the page opens it will go to anchor “#main” for example?
I agree with the former poster – this is a really great feature! It’s not an effect, it’s a function to get the user to a new position on the page, and letting the user know they’re still on the same page! Perfect!
I also have the same question as the former poster – how do get the scroll to activate as soon as the page is loaded (with a document.onLoad()?)
is there a way to open the URL from the anchor
document.onLoad() method would be great
Hi and thanks, this is a great script! I am having problems with this not playing nice with an accordion on my page. Has anyone else encountered this or can they think of why this would be a problem.
I am calling the accordion with jQuery and
$(“.accordion”).accordion();
with the html structure as :
Accordion title
content
Is it possible to make this happen on pageload if I have a link on another page like this:
tabbedcontent.php#tabs-3
Can I make it slide to #tabs-3 when document is ready?
yea use the trigger event,
$(“.button”).trigger(“click”)
Of course you need a a tag that would ahve the same behavior if you clicked on it
[...] Another fun UI design I put in: A button that combines a tab change and page slide. In the sidebar, I wanted a “see details about the rooms” link that was always present. When this link is clicked, the tab changes to the “rooms” tab, waits just long enough for the user to register that a page change occurred, and the slides to the appropriate spot on the page. (This code was adapted from the UI article written here) [...]
Cedric, about the “yea use the trigger event, $(”.button”).trigger(”click”)” to make a page load and then scroll, can you make a sample for those of us who just cut & paste code and don’t actually understand the code? Your advice is just a tease to us cut & pasters! Thanks!
Cedric Dugas, you said: “In the javascript, add 45 at the formula”.
I really doesn’t understand, can you explain?
Thanks!
Hi,
Really great work
That’s very nice !
As Vin Thomas, Ard or Olle, I’d like to know how to leave a margin at the top.
Cedric Dugas, you said: ““In the javascript, add 45 at the formula”.
Where exactly? I tried “var destination = $(elementClick).offset().top + 45 ;” and “…animate({ scrollTop: destination + 45},…” but without success…
I’d be very grateful if you could help us…
Thanks a lot!
I found a solution (probably not the best one…).
Minus to the var “destination” the value in px that you need. For exemple, it will be “var destination = $(elementClick).offset().top – 45;”.
Then, delete or comment the line with “window.location.hash = elementClick”.
It should work, but you the the anchor information in the URL.
If someone has a better way to do it…
sweet. works like a charme. thx for sharing.
I can’t get this to work. I have my link inside a fixed position div, and I have the target text in another div on the same page, and it doesn’t scroll. I followed everything as laid out to the best of my abilities – anyone got any suggestions as to what I can try?
NB. IDEALLY I would like the target to be an image, not a text link, is this possible?
This is wonderful, a lot easier to understand than the other plugins i tried, can’t believe people are having problems.
i was curious; is there a simple addition to the jquery code to make the effect do that easing effect? i tried adding something next to the speed but it seems more complicated than that. either way thanks a lot for your great post!
@eddie There is only one default easing with jquery, however there is a simple plugin that add mostly any easing possible, look in google for jquery easing plugin , pretty sure it s the first link
Hey, great script!
quick question, I’m making an ‘open site map’ button, and basically when you click on it it makes a hidden div at the bottom of the page visible and then is supposed to slide down to an anchor at the bottom of the div. However I cannot get the anchor to animate the 1st time it is clicked. Once it has been clicked and goes to the bottom of the now visible div it will animate when clicked on again, just not the 1st click when the page is laoded. Any ideas?
the JS im using is:
$(“.anchorLink”).click(function(){
$(“#sitemappanel”).show();
$(“.anchorLink”).anchorAnimate();
});
any help would be very amazing!
cheers
ahha! sorted it thanks anyways! great script
This great script does not work properly in Opera 10.10 as concerning back slider (to the top). Try it: http://round.round-interactive.ru/anchor/
click on second anchor in Opera and see how badly it working (it had to move the screen to the top smoothly)