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.

View demo

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