123
user profile image

Comments

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

  2. 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;
    });
    
  3. How do you make is not highlight the target with a blue box?

  4. @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.
Loading...