Search the blog

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

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


    $('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">
    <!-- -->
Tim Bennett is a freelance web designer from Leeds. He has a First Class Honours degree in Computing from Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.