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

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"