javascript - div 之间平滑滚动

Question

这个问题已经有答案了:

Smooth scroll to div id jQuery (17 个回答)

已关闭 8 年前。

我有一个包含大量文本的页面，并决定使用固定的导航栏，这样可以更轻松地在各部分之间跳转。它工作得很好，但我不想让页面在 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>

此外，是否可以让指向正在显示的 div 的 li 元素采用与其他 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});
});