javascript - アニメーションを実行する前に jQuery ページが先頭にジャンプする

Question

Web サイトのスライドアップ アニメーションを作成しようとしています。コア機能はありますが、1 つの要素をクリックするたびに (ページが一番上にない場合)、ページが上下にジャンプしてから戻るという問題があります。アニメーションを意図したとおりにします。過去数日間調査しましたが、私の問題は独特であるように思われるため、この質問をすることにしました。これは私が持っているものです:

<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>

アイデアは、1 つの div (1 番目、2 番目、3 番目) をクリックし、ナビゲーションバーのために上から 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>

問題は仰る通りです。ページがページの先頭にすばやくジャンプしてから、前の位置に戻ります。その後、上下にスライドするアニメーションは非常にきれいでスムーズです。どこに問題があるのか​​ 本当にわかりません。誰かが私を助けてくれることを願っています。前もって感謝します。