jQuery: Smooth Scrolling Internal Anchor Links

November 13th, 2010 Charlie Evans 66 Comments

Here’s a neat little jQuery trick to fancy up your internal anchor links, by making them scroll smoothly to their target as opposed to jumping instantly.

Internal anchor links are very common place,
e.g. “back to top” links, or FAQ pages which list all the questions at the top.
Making them visually scroll to their target not only looks a bit fancy, it also gives some visual feedback to the user as to their new position on the page.

This is what it looks like in action, click the following link:
Scroll to comments

This technique is very simple.

  1. Set up your link as you normally would,
    e.g. href=”#comments” (where comments is the id of your target)
  2. Add a class=”scroll” attribute to the link element, so it now looks something like this:

    <a href="#comments" class="scroll">Scroll to comments</a>
  3. Finally add the following jQuery code wherever is most appropriate

    jQuery(document).ready(function($) {
 
	$(".scroll").click(function(event){		
		event.preventDefault();
		$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
	});
});

And that’s all there is to it 🙂

A common mistake in implementing this script is using “named anchors” for your target, instead of an id attribute on your target element. If you are stuck with named anchors for whatever reason (e.g. due to WYSIWYG restrictions) then you can try this modification from Giles:

$('html,body').animate({scrollTop:$('[name="'+this.hash.substring(1)+'"]').offset().top}, 500);

66 Responses to “jQuery: Smooth Scrolling Internal Anchor Links”

  1. By Felix Nov 29th, 2010 at 5:48pm

    The script gets stuck on the second anchor… what gives? http://felixdeportu.com/ver/6/test2.html

    • By Charlie Evans Nov 29th, 2010 at 6:40pm

      Hey Felix – thanks for visiting!
      I’m not sure exactly what behaviour you’re trying to achieve on your test page.
      This script is to add vertical animation to anchor links that were already working.
      You’ll need to include the script with no modifications, add the “scroll” class to the link elements then I’m sure you’ll find it works sweet.

  2. By Drea Apr 6th, 2011 at 2:53am

    Thank you so much!! This script was so simple and woks so nicely. So appreciated!

    • By Charlie Evans Apr 6th, 2011 at 7:32am

      You’re welcome Drea 🙂

  3. By SteliosKarouta Apr 18th, 2011 at 10:54am

    what about if you want it to scroll horizontally? is it the same code?

    • By Charlie Evans Apr 23rd, 2011 at 9:24pm

      Hi Stelios, thanks for your comment.
      For horizontal scrolling the code is slightly different because you need to use scrollLeft and offset().left.

      Replace the animate line as follows:
      $(‘html,body’).animate({scrollLeft:$(this.hash).offset().left}, 500);

  4. By Aly Apr 19th, 2011 at 2:40pm

    I know how to use internal anchors, but I’ve never used jQuery before. ..Where do I paste the jQuery code? Can I put it in the html of my website somewhere? Or does it need to go in a separate javascript file?

    • By Charlie Evans Apr 23rd, 2011 at 9:36pm

      Hi Aly – thanks for visiting!
      Firstly you need to load the jQuery core on your page, then you can add jQuery scripts.

      I’d recommend loading the core from Google’s CDN by adding the following script tag to your HTML:

      <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>

      Then you can either put the jQuery code in a separate file (e.g. script.js) and include it as follows:

      <script type='text/javascript' src='script.js'></script>

      Or you can put the code directly inside a script element
      e.g.

      <script type='text/javascript'>
// paste the code here
</script>

      Hope that helps!

  5. By Brian Aug 6th, 2011 at 3:01am

    Hey, thank you, much appreciated. This is exactly what I was looking for. I am glad people like you out there take the time to create these tutorials.

  6. By Renji Sep 1st, 2011 at 2:37am

    This is so easy to implement, thanks Charlie. 🙂

  7. By M.Pinto Sep 2nd, 2011 at 4:59am

    Thanks a lot bro..
    This is so short and nice!! Works great!! 🙂

  8. By dewald Sep 13th, 2011 at 10:53am

    nice. thanks

  9. By mike Sep 19th, 2011 at 12:34am

    Hi there-

    Thanks for the script, its the simplest and smoothest anchor scroll ive come across so far, and ive been searching for the better part of 2 days…

    I have 2 questions though:

    1. Like Felix above, the script seems to get stuck on the second anchor, and wont scroll back up. The rest of the anchors (ive got 9 on my page) seem to scroll fine… is there something im doing wrong? script was copied and pasted as above.

    2. I was wondering, is possible to get the scroll to stop in the middle of the page, rather than at the top? More precisely, i want the scroll to stop 150px off the top of the browser window. Is this difficult to implement??

    Thanks in advance

    • By Charlie Evans May 10th, 2012 at 10:29pm

      Hi Mike – thanks for commenting..
      I’m not sure about getting stuck on your second anchor.. I’d suggest installing Firebug to see if any errors are being thrown..

      For your second question – no probs, just use this line:
      $(‘html,body’).animate({scrollTop:$(this.hash).offset().top – 150}, 500);

  10. By gabe Sep 22nd, 2011 at 6:17pm

    hey charlie,

    I have a fixed navigation set up in my website, but I cant get to the smooth scroll effect to work. What am I doing wrong here?
    http://www.typograffyunderground.com

    Gaber

    • By Charlie Evans May 10th, 2012 at 10:25pm

      Hi Gabe – this is a common problem 🙂 You need to use id’s instead of name attributes in your target anchors..

  11. By Mark Hannon Oct 29th, 2011 at 12:13am

    Can’t get it to work. As far as I can tell, I have followed the instructions. The anchor links work as expected without the jquery but the navigation breaks when I add the jquery function and add the scroll class to my anchor links. I am using the latest version of jquery, “jquery-1.6.4.min.js”.

    Here is a link to my file: http://www.markhannondesign.com/scrollTest/scroll.html

    Thanks for any help.

    • By Charlie Evans May 10th, 2012 at 10:21pm

      Hi Mark – thanks for your comment.. You need to use id’s instead of name attributes in your target anchors..

  12. By Adam Nov 10th, 2011 at 9:19pm

    Thank you for this wonderful snippet 🙂

  13. By Allie Nov 19th, 2011 at 4:56am

    I was looking everywhere for a page scroll. I already had my hashes setup and I was trying different tutorials from other websites, but it wasn’t working. This worked perfect on the first try! Thank you so much for taking the time to put this up for developers.

  14. By Myo Kyaw Htun Dec 10th, 2011 at 8:14pm

    It works for me. The script is very useful and simple. Thank a lot!

  15. By Giles Feb 1st, 2012 at 2:45am

    If you are using progressive enhancement, you will be scrolling to an anchor tag. Sometimes these have name attributes, rather than ids. In that case, you need the following formulation (note that the selector for the clicked element is also different here, but any valid selector works):

    $(‘ul.toc a’).click(function(event) {
    event.preventDefault();
    $(‘html’).animate({scrollTop:$(‘[name=”‘+this.hash.substring(1)+'”]’).offset().top}, 500);
    });

    • By Charlie Evans May 10th, 2012 at 10:57pm

      Hi Giles – there’s been a few comments from people using named anchors so many thanks for your solution!

      It is worth mentioning that you should avoid using named anchors as they deprecated in XHTML and invalid in HTML5..
      If possible, for internal links you should be using an id attribute on your target element (which should only be an anchor tag if it’s a link itself).

  16. By Mike Feb 14th, 2012 at 8:18am

    This has literally made my day. Thank you! 🙂

  17. By Steve Feb 17th, 2012 at 8:42am

    Hi, the jquery works great if there is an anchor with an ID. Our WYSIWYG editor doesn’t create an ID to anchor to, it only creates a name. Can your script be modified to look for the name? Thank you.

    • By Charlie Evans May 10th, 2012 at 11:23pm

      Hi Steve – thanks for your comment!
      I’ve added a note to the main article above regarding “named anchors”. It contains a modification you can try 🙂

      • By Steve Sep 1st, 2012 at 2:16am

        Thanks for the updated script. I appreciate it.

  18. By chris Feb 20th, 2012 at 5:22pm

    thank you so much for the scrolling code. i made a responsive site for tanvenient.com, but on a full screen the main image fills the screen. turns out that novice web users wanted to click the image to get to the site. now, if they click the image, they get a nice smooth scrolling effect to the main content. again, thank you so much for the code and help. –chris

  19. By Marie Mar 15th, 2012 at 6:05am

    Great script! Thanks!

  20. By Ben Mar 19th, 2012 at 12:31pm

    Thanks man, really big help.

  21. By DC Mar 21st, 2012 at 11:52pm

    Hello! Thank you very much for that code!

    But I have a liitle issue here : I’d like the scrolled element not to bump the top of the page, i’d like to offset the destination point of the scroll. I’d like to be 100-200px under the top of the page. How can I do that?

    Thnaks a lot

    • By Charlie Evans May 10th, 2012 at 10:05pm

      Hi David – you’re welcome! You can do this easily by subtracting the desired number of pixels from the scrollTop value..
      e.g.
      $(‘html,body’).animate({scrollTop:$(this.hash).offset().top – 100}, 500);
      or
      $(‘html,body’).animate({scrollTop:$(this.hash).offset().top – 200}, 500);

  22. By Patrick Apr 25th, 2012 at 1:56pm

    Hello Charlie,

    script looks great and exactly hat I was looking for, but I have some issues trying to horizontally scroll through a 4000px width table which has 4 1000px width content blocks and where I want to scroll to the 4 different anchors with your script by clicking on the respective navigation links. I have of course changed the code for horizontal scrolling as mentioned before in one of your comments but still having problems.

    Could you PLEASE have a look at the site and see if you see my mistake ?

    http://www.patr1ck.com/julio/

    Thx in advance for any help !

    • By Charlie Evans Apr 29th, 2012 at 2:55pm

      Hi Patrick – thanks for your comment!
      There’s a couple of quick things that I noticed..

      1. You have spaces in your hashes so they don’t match the respective IDs,
      e.g. href=”#section 1″ should be href=”#section1″

      2. Your CSS isn’t quite right with the overflow:hidden.. Take that out and you’ll see some scrolling at least..

      Good luck 🙂

  23. By Eric May 6th, 2012 at 2:09pm

    Everyone seems to be having no problems with this, but it isn’t working for me? In fact, it is breaking my link so it doesn’t even work at all. What am I doing wrong?

    Link is at the bottom of the page: http://ericanton.net/mobile

    • By Charlie Evans May 7th, 2012 at 12:35pm

      Hi Eric – thanks for your comment.. Your “#top” link needs to point at an id=”top” attribute (not a name=”top”)..

      • By Eric May 8th, 2012 at 11:35am

        O wow. Thanks!

  24. By Matheus May 8th, 2012 at 12:11pm

    Perfect! The script is small and perfect!

  25. By Wiro May 17th, 2012 at 7:15pm

    Hi there,

    Great script! Just wondering if we could scroll from bottom to the top instead of top to bottom?

    Thanks for your help!

    • By Charlie Evans May 17th, 2012 at 10:01pm

      Hey Wiro – thanks for your question.. Yep this script will work in any vertical direction. Have fun 🙂

      • By Wiro May 18th, 2012 at 12:15pm

        Hey Charlie, thanks man such a quick reply 😀 cheers!

  26. By John May 29th, 2012 at 3:03pm

    This looks great! Could it be made to work in the following situation?

    Because my links contain s and s are not allowed in As, my “links” are s with onClick=”location.href=’#foo'”

    I was hoping I could just add class=”scroll” to the but that didn’t do anything.

    • By John May 29th, 2012 at 3:05pm

      Oops, that didn’t look good. Let me remove the angle brackets:

      Because my links contain DIVs and DIVs are not allowed in As, my “links” are LIs with onClick=”location.href=’#foo’”

      I was hoping I could just add class=”scroll” to the LI but that didn’t do anything.

      • By Charlie Evans May 29th, 2012 at 11:08pm

        Hey John – thanks for your comment.. Problem is that the script is looking for this.hash which comes from the href attribute of the a tag..
        It’s a bit of a hack but you add a title attribute to your li tags, and use that to specify your target..
        e.g.

        <li class="scroll" title="#foo">

        (You’ll need to lose the onClick attribute)

        Then in the script, just replace this.hash with this.title

        Let me know how you get on 🙂

  27. By John May 30th, 2012 at 4:26am

    OK. I’ll try that.

    Must the attribute be “title”? Could it be, say, “target”?

    Maybe you’ll say, yes it could be “target” but then the HTML wouldn’t validate.

    Or maybe you’ll say, no it can’t because what follows the period in “this.” must be something already specified in JQuery.

    Either way, even if I need to use .title, I should be OK. I’m not using “title” for anything else.

    I’ll try it and let you know. Thanks.

    • By John Jun 5th, 2012 at 11:58am

      .title worked fine.

  28. By Paul Jun 27th, 2012 at 1:31pm

    I know this is an older post, but I just wanted to say, thanks! This script, and your instructions, helped me quite a bit on a simple one-page site I put together.

  29. By Dominor Novus Sep 16th, 2012 at 2:12am

    Explained well and works as is for me. Didn’t expect the jQuery to be so light-weight for a vertical scroll effect.

  30. By John Sep 19th, 2012 at 4:28am

    Why is the selector ‘html,body’ instead of just one of those? A result is that the animation runs twice.

    I noticed this because a callback was running twice, which caused problems.

    http://forum.jquery.com/topic/animate-callback-executing-twice

    • By Charlie Evans Sep 19th, 2012 at 12:19pm

      Hey John – this is just to get good cross browser support.. I can’t remember which right now but ‘html’ works in some browsers and ‘body’ works in others so specifying both makes it work everywhere.. Doesn’t seem to be a problem if the callback runs twice when used in this case.

  31. By Paul Sep 22nd, 2012 at 3:45pm

    Great piece of code Charlie! Sure beats using a whole plugin 🙂

    • By Charlie Evans Sep 22nd, 2012 at 6:39pm

      Thanks Paul – short and sweet 🙂

  32. By John Oct 1st, 2012 at 8:22am

    How does one dequeue a scroll? I have a DIV inside another DIV. Clicking either triggers the softscroll. But that means clicking the inner one generates two scrolls, first for the inner, then for the outer. Is there a way to either delete the outer from the queue, or stop it from getting queued in the first place? Basically, I want a click on the inner to override a click on the outer. Suggestions appreciated.

    I still love the scroll. Thanks for it!

    • By John Oct 1st, 2012 at 9:04am

      I’ve put $(‘body,html’).clearQueue(); in the animate’s callback function and it seems to work. Is that the right thing to do?

  33. By mark Oct 3rd, 2012 at 1:01am

    whoa! I been looking and reading a lot of tutorials for this trick and you’re the only who made it very simple to understand for a newbie like me. Thank you so much. you save me from headache x)

  34. By Philipp Oct 17th, 2012 at 1:08am

    Thanks Charlie, great and simple stuff. Works perfect with easing plug-in.

  35. By Nick Oct 20th, 2012 at 12:03pm

    Hi! I absolutely love this script and it is working wonderfully for me! I tried a bunch of other scripts but this was the only one to work! I was also having the issue where it stops at the second anchor and I figured out the issue: if, in your css file, you have overflow:hidden to hide the scrollbar on the right hand side, it stops. As soon as I took that line out, it goes anywhere on the page. Hope this helps someone!

  36. By AndyBlue Dec 2nd, 2012 at 6:11am

    If I could find you, I would kiss you. I’ve been pulling my hair out, but this worked like a charm. THANK YOU.

  37. By Hjalmaar Dec 10th, 2012 at 11:15pm

    Small, simple and works across all devices and browsers. Perfect. Thank you very much.

  38. By Nimmi Jan 12th, 2013 at 10:19pm

    Very nice and handy script worked for me well.
    Thanks

  39. By Jared Jan 18th, 2013 at 6:37am

    First item I found with a search and it was just what I needed. Done in about 5 minutes. Thanks.

  40. By alejandro Jan 22nd, 2013 at 3:47am

    thanks,

    works like a charm… 🙂

  41. By Erica Feb 23rd, 2013 at 4:44am

    amazing stuff! Thank you so much!

  42. By pipdig Feb 26th, 2013 at 10:22pm

    Been looking for a tutorial on this for ages, thank you!

  43. By whitecreek Mar 6th, 2013 at 9:38pm

    Fantastic script. When things are made so simple they have to be the way to go. Definitely.

    Great job!!

  44. By eridani Mar 9th, 2013 at 7:06am

    Thats a super cool and useful snippet Charlie, thanks a lot! =3