jQuery animated scroll-to links

Include jQuery and use this function for jQuery animated scroll-to links.

$('a.scroll-to').click(function(e) {

    e.preventDefault();

    $('html, body').animate({

        scrollTop: $('.' + $(this).data('scroll-to')).offset().top

    }, 1000); // Load some easings and set after the speed parameter for a better scroll

});

Then set links up like this. The data-scroll-to attribute contains the class name of the element you want to scroll to.

<a class="scroll-to" href="#" data-scroll-to="foo"></a>

It will scroll to an element based on the class name (you can change the full stop in the function to a hash if you’d prefer to use IDs).

<div class="foo">
    <!-- -->
</div>