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 thoughts on “Better html anchor, a jquery script to slide the scrollbar

  1. 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?

  2. 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

  3. Err, I should also mention that it’s in the first “View Demo” link. Also, I misspelled ‘tutorial’ 🙂

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

  5. (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!

  6. 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.

  7. 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?

  8. 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.

  9. Never mind. You have to call the JS in a specific order, which I didn’t know. Anchor script first, JQuery second.

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

  11. 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?

  12. 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()?)

  13. 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

  14. 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?

  15. 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

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

  17. Cedric Dugas, you said: “In the javascript, add 45 at the formula”.

    I really doesn’t understand, can you explain?

    Thanks!

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

  19. 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…

  20. 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?

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

  22. @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

  23. 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

Comments are closed.