css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
user profile image


  1. This is great and all, but how do you do the same thing with a scrollable div with anchors in it?

  2. Check out this implementation I came up with that uses CSS transitions for the animation and then repositions the scrollbar afterward: https://codepen.io/lemmin/pen/KaRKBj

  3. Here is a 12 liner:

     $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 1000);
        return false;
  4. How do you make is not highlight the target with a blue box?

  5. @RTM0101 You change the :focus style. But the fact that the blue box happens at all is very good for accessibility. Read here: https://css-tricks.com/smooth-scrolling-accessibility/

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.