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();