30
Better html anchor, a jquery script to slide the scrollbar
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
Author: Cedric Dugas
Cedric Dugas is an experienced front-end developer and founder of Position: Absolute, based in Montreal, Canada. When he is not doing CSS and jquery (does it ever happen?), he likes to read on web usability and play trumpet. Why don't you follow him on twitter.
104 Comments to “Better html anchor, a jquery script to slide the scrollbar”
Articles
Some Tweets
- good day today, did an autocomplete widget that use the binary algorithm in pure JS,
- doing a pure js widget.. it's like going back 5 years ago
- Inspire the web with just 10K. A competition from ALA http://10k.aneventapart.com/
- binary search rock large javascript array
- Photoshop just crashed on me, been a while...
- Introduction to the Google WebFont Loader and how to avoid @font-face text flickering with it http://bit.ly/at8Pus
There is issues when animating the scrollbar with opera, tried prevent.default() but it seems this is not working
i like it, but is there an easy way to make it slide horizontally to an anchor?
Actually, I’m after exactly the same as Ben, there. It’s nice though.
When adding the class “Anchorlink”, the link doesn’t work anymore (not even just the anchor).