Better html anchor, a jquery script to slide the scrollbar

by Cedric Dugas on March 30, 2009

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.

Download from Github   |   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 from Github   |   View 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

Ads

Join testking 646-363 online web development course to learn about different web applications and become expert using testking 646-656 JavaScript tutorials and expert testking 1Y0-A08 study guides on html.



104 comments

There is issues when animating the scrollbar with opera, tried prevent.default() but it seems this is not working

by Marc on November 27, 2009 at 1:39 pm. #

i like it, but is there an easy way to make it slide horizontally to an anchor?

by ben martin on November 28, 2009 at 2:13 am. #

Actually, I’m after exactly the same as Ben, there. It’s nice though.

by Colin Quinn on December 1, 2009 at 8:10 pm. #

When adding the class “Anchorlink”, the link doesn’t work anymore (not even just the anchor).

by anchorLink on December 2, 2009 at 8:58 am. #