scroll - scrollTo 跳转到元素不滚动

Question

我在实现 scrollTo 时遇到问题。

<div id="container">    
        <section class="rcWrapper">
            <ul>
                <li class="slide" id="slide-1">1</li>
                <li class="slide" id="slide-2">2</li>
                <li class="slide" id="slide-3">3</li>
                <li class="slide" id="slide-4">4</li>
                <li class="slide" id="slide-5">5</li>
            </ul>
        </section>

        <nav id="navigation">
            <a href="#slide-1">slide-1</a>
            <a href="#slide-2">slide-2</a>
            <a href="#slide-3">slide-3</a>
            <a href="#slide-4">slide-4</a>
            <a href="#slide-5">slide-5</a>
        </nav>
    </div><!-- end of container -->

这是我的js：

$(function(){
    $('#navigation a:first-child').click(function(){
        $(window).scrollTo('#slide-1', 800);
    });
});

我可能错过了一些东西，但我看不到它。任何人？？谢谢！

Answer 1

   .click(function(){    
     $(window).animate({
        scrollTop: $('#slide-1').offset().top,
        // scrollLeft: $('#slide-1').offset().left
     }, 1000);
     return false; // <- don't forget about this line, because if it won't be there, browser will follow link.
   });

Answer 2

不用 JS 代码试试。

<div id="container">    
    <section class="rcWrapper">
        <ul>
            <li class="slide" id="slide-1">1</li>
            <li class="slide" id="slide-2">2</li>
            <li class="slide" id="slide-3">3</li>
            <li class="slide" id="slide-4">4</li>
            <li class="slide" id="slide-5">5</li>
        </ul>
    </section>

    <nav id="navigation">
        <a href="#slide-1">slide-1</a>
        <a href="#slide-2">slide-2</a>
        <a href="#slide-3">slide-3</a>
        <a href="#slide-4">slide-4</a>
        <a href="#slide-5">slide-5</a>
    </nav>
</div><!-- end of container -->

属性 href = "id_element"