Simple scroll-to menu

by lucasprus

HTML

<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur consequat velit sit amet mauris scelerisque porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum eu massa id arcu volutpat egestas. Praesent vitae diam sed diam ullamcorper laoreet. Praesent dictum erat ante, eu molestie diam rutrum sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<a href="#span1" class="animated-scroll">Scroll to span1</a>

<a href="#span2" class="animated-scroll">Scroll to span2</a>

<a href="#span3" class="animated-scroll">Scroll to span3</a>

<a href="#span4" class="animated-scroll">Scroll to span4</a>

<br>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur consequat velit sit amet mauris scelerisque porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum eu massa id arcu volutpat egestas. Praesent vitae diam sed diam ullamcorper laoreet. Praesent dictum erat ante, eu molestie diam rutrum sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur consequat velit sit amet mauris scelerisque porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum eu massa id arcu volutpat egestas. Praesent vitae diam sed diam ullamcorper laoreet. Praesent dictum erat ante, eu molestie diam rutrum sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur consequat velit sit amet mauris scelerisque porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum eu massa id arcu volutpat egestas. Praesent vitae diam sed diam ullamcorper laoreet. Praesent dictum erat ante, eu molestie diam rutrum...

CSS

span {
    color:red;
    background-color:yellow;
}

JavaScript

jQuery(function ($) {
    $('a.animated-scroll').click(function () {
        var tagTopOffset = $($(this).attr('href')).offset().top;
        $('body').animate({
            scrollTop: tagTopOffset
        }, 'slow');
    });
});