Страница jQuery переходит наверх перед выполнением анимации

Question

Я пытаюсь сделать слайд-анимацию для своего веб-сайта. Основные функциональные возможности есть, но у меня есть проблема в том, что всякий раз, когда я нажимаю на один элемент (когда страница не сверху), страница переходит вверх и назад, а затем делает анимацию как задумано. Я исследовал последние дни, но мои проблемы кажутся уникальными, поэтому я решил задать этот вопрос. Вот что у меня есть:

<div class="content">
    <div class="inner_content">
        <div id="first" class="first"></div>
        <div id="second" class="second"></div>
        <div id="third" class="third"></div>
    </div>
</div>

Идея состоит в том, чтобы щелкнуть один элемент div (первый, второй, третий) и прокрутить его вверх со смещением 130 пикселей сверху из-за панели навигации. Это мой jQuery:

<script>
    $( "div.first").click(function(){
        $("html, body").animate({
            "scrollTop": $("div.first").offset().top -130 
        }, 500);
        $( "div.second").click(function(){
            $("html, body").animate({
                "scrollTop": $("div.first").offset().top -130 
            }, 500);
            $( "div.third").click(function(){
                $("html, body").animate({
                    "scrollTop": $("div.first").offset().top -130 
                }, 500);
</script>

Проблема, как сказано. страница очень быстро переходит на верх страницы, а затем возвращается на предыдущую позицию. после этого анимация скольжения вверх или вниз очень чистая и плавная. Я действительно не знаю, где проблема. Я надеюсь, что кто-нибудь может мне помочь. Заранее спасибо.

Answer 1

Вы пропустили некоторые из заключительных скобок.

$(document).ready(function () {
    $("div.first").click(function () {
        $("html, body").animate({
            "scrollTop": $("div.first").offset().top - 130
        }, 500);
    });
    $("div.second").click(function () {
        $("html, body").animate({
            "scrollTop": $("div.first").offset().top - 130
        }, 500);
    });
    $("div.third").click(function () {
        $("html, body").animate({
            "scrollTop": $("div.first").offset().top - 130
        }, 500);
    });
});

Кроме того, я заметил, что вы запускаете анимацию на div.click, но если вы когда-нибудь сделаете это на anchorэто приятно использовать event.preventDefault();