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!
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