Smooth href-id navigation

by Valentin Sarychev

HTML

<ul>
    <li><a href="http://www.example.com">http://www.example.com</a></li>
    <li><a href="#">empty hash</a></li>
    <li><a href="#2010">2010</a></li>
    <li><a href="#2009">2009</a></li>
    <li><a href="#2008">2008</a></li>
    <li><a href="#2007">2007</a></li>
    <li><a href="#2006">2006</a></li>
    <li><a href="#2005">2005</a></li>
    <li><a href="#2003">2003</a></li>
    <li><a href="#1999">1999</a></li>
 <ul>

     <div id="2010"><b>2010</b> sadfasf sdfg<br/> asfgas dfasdfasdfa<br/>sf sdfg<br/> asfgas dfasdfasdfa<br/>sdf asdf asdf <br/>asdfdf asdf asdf <br/>asdf asdf a<br/>sdfasdf </div>
    <div id="2009"><b>2009</b> sadfasf sdfg<br/> asfgas dfasdfasdfa sdfg<br/> asfgas dfasdfasdfa<br/>sdf asdf asdf <br/>asdfbr/>sdf asdf asdf <br/>asdf asdf a<br/>sdfasdf</div>
    <div id="2008"><b>2008</b> sadfasf sdfg<br/> asfgas dfasdfasdfabf sdfg<br/> asfgas dfasdfasdfa<br/>sdf asdf asdf <br/>asdfr/>sdf asdf asdf <br/>asdf asdf a<br/>sdfasdf</div>
    <div id="2007"><b>2007</b> sadfasf sdfg<br/> asfgas dfasdfasdfarf sdfg<br/> asfgas dfasdfasdfa<br/>sdf asdf asdf <br/>asdf/>sdf asdf asdf <br/>asdf asdf a<br/>sdfasdf</div>
    <div id="2006"><b>2006</b> sadfasf sdfg<br/> asfgas dfasdfasdfa<br/>f sdfg<br/> asfgas dfasdfasdfa<br/>sdf asdf asdf <br/>asdfsdf asdf asdf <br/>asdf asdf a<br/>sdfasdf</div>
    <div id="2005"><b>2005</b> sadfasf sdfg<br/> asfgas dfasdfasdfaf sdfg<br/> asfgas dfasdfasdfa<br/>sdf asdf asdf <br/>asdfbr/>sdf asdf asdf <br/>asdf asdf a<br/>sdfasdf</div>
    <div id="2003"><b>2003</b> sadfasf sdfg<br/> asfgas dfasdfasdfabf sdfg<br/> asfgas dfasdfasdfa<br/>sdf asdf asdf <br/>asdfr/>sdf asdf asdf <br/>asdf asdf a<br/>sdfasdf </div>
    <div id="1999"><b>1999</b> sadfasf sdfg<br/> asfgas dfasdfasdfa<br/>f sdfg<br/> asfgas dfasdfasdfa<br/>sdf asdf asdf <br/>asdfsdf asdf asdf <br/>asdf asdf a<br/>sdfasdf</div>
        <div class="foot" />

CSS

div[id] {
    margin-top: 30px;
}

.foot {
    height: 1000px;
}

JavaScript

$(function() {
    // handle links with @href started with '#' only
    $(document).on('click', 'a[href^="#"]', function(e) {
        // target element id
        var id = $(this).attr('href');
        
        // target element
        var $id = $(id);
        if ($id.size() === 0) {
            return;
        }
        
        // prevent standard hash navigation (avoid blinking in IE)
        e.preventDefault();
        
        // top position relative to the document
        var pos = $(id).offset().top;
        
        // animated top scrolling
        $('body, html').animate({scrollTop: pos});
    });
});