Плавная прокрутка между divs

Question

У меня есть страница с большим количеством текста и решила пойти с фиксированным навигатором, что облегчает переход между разделами. Он работает отлично, но вместо того, чтобы переходить на страницу между div, я бы хотел, чтобы он прокручивался вверх и вниз.

Это то, что у меня есть до сих пор;

<ul> 
    <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"></div> 
    <div id="2009"></div> 
    <div id="2008"></div>`` 
    <div id="2007"></div> 
    <div id="2006"></div> 
    <div id="2005"></div> 
    <div id="2003"></div> 
    <div id="1999"></div> 

Кроме того, можно иметь элемент LI, который направляет в DIV, который показывает еще один цвет, чем другие элементы Li?

Answer 1

Хорошо, возьми! http://jsfiddle.net/a126cwb3/11/

// 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}); 
});