jQuery scrollTop a little jumpy

Question

Я строю сайт с вертикальным прокруткой.

Я реализован JQuery ниже:

<script type="text/javascript"> 
$("document").ready(function() {    

      $('.homebutton').click(function(){ 

       $('html, body').animate({ 
        scrollTop: $("#home").offset().top 
       }, 1500);     


      }); 



      $('.aboutbutton').click(function(){ 

       $('html, body').animate({ 
        scrollTop: $("#about").offset().top 
       }, 1500);     


      }); 


      $('.portfoliobutton').click(function(){ 

       $('html, body').animate({ 
        scrollTop: $("#portfolio").offset().top 
       }, 1500);     


      }); 



      $('.contactbutton').click(function(){ 

       $('html, body').animate({ 
        scrollTop: $("#contact").offset().top 
       }, 1500);     


      }); 

}); 
</script> 

Со следующим HTML:

<div id="wrapper"> 

<div id="home" class="tab home"> 

    <div class="header"> 

     <div class="logo"> 

      <img src="images/logo.jpg" /> 

     </div> 

     <div class="menuholder"> 

      <ul id="homemenu" class="menu"> 

       <li><a class="active homebutton" href="#home">HOME<br /></a> </li> 
       <li><a class="aboutbutton" href="#about">ABOUT<br /></a> </li> 
       <li><a class="portfoliobutton" href="#portfolio">PORTFOLIO<br /></a> </li> 
       <li><a class="contactbutton" href="#contact">CONTACT<br /></a> </li> 

      </ul> 

     </div> 

     <div class="clr"></div> 

    </div> 

    <div class="content"> 

    </div> 

</div> 

<div id="about" class="tab"> 

    <div class="header"> 

     <div class="logo"> 

      <img src="images/logo.jpg" /> 

     </div> 

     <div class="menuholder"> 

      <ul id="aboutmenu" class="menu"> 

       <li><a href="#home" class="homebutton">HOME</a> </li> 
       <li><a class="active aboutbutton" href="#about">ABOUT<br /><span>All you need to know</span></a> </li> 
       <li><a href="#portfolio" class="portfoliobutton">PORTFOLIO<br /><span>See what we can do!</span></a> </li> 
       <li><a href="#contact" class="contactbutton">CONTACT<br /><span>Get in touch and say HI!</span></a> </li> 

      </ul> 

     </div> 

    </div> 

    <div class="content"> 

    </div> 

</div> 

<div id="portfolio" class="tab"> 

    <div class="header"> 

     <div class="logo"> 

      <img src="images/logo.jpg" /> 

     </div> 

     <div class="menuholder"> 

      <ul id="portfoliomenu" class="menu"> 

       <li><a href="#home" class="homebutton">HOME</a> </li> 
       <li><a href="#about" class="aboutbutton">ABOUT<br /><span>All you need to know</span></a> </li> 
       <li><a class="active portfoliobutton" href="#portfolio">PORTFOLIO<br /><span>See what we can do!</span></a> </li> 
       <li><a href="#contact" class="contactbutton">CONTACT<br /><span>Get in touch and say HI!</span></a> </li> 

      </ul> 

     </div> 

    </div> 

    <div class="content"> 

    </div> 

</div> 

<div id="contact" class="tab"> 

    <div class="header"> 

     <div class="logo"> 

      <img src="images/logo.jpg" /> 

     </div> 

     <div class="menuholder"> 

      <ul id="contactmenu" class="menu"> 

       <li><a href="#home" class="homebutton">HOME</a> </li> 
       <li><a href="#about" class="aboutbutton">ABOUT<br /><span>All you need to know</span></a> </li> 
       <li><a href="#portfolio" class="portfoliobutton">PORTFOLIO<br /><span>See what we can do!</span></a> </li> 
       <li><a class="active contactbutton" href="#contact">CONTACT<br /><span>Get in touch and say HI!</span></a> </li> 

      </ul> 

     </div> 

    </div> 

    <div class="content"> 

    </div> 

</div> 

</div> 

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

Мой вопрос в том, есть ли простой способ поставить в очередь действия в jQuery, чтобы предыдущее действие успело остановиться и перевести дыхание до следующего запуска?

Я пробовал .stop() после функции щелчка и после функции анимации. Один после функции щелчка сделал его еще хуже, а один после функции оживления сломал все это вместе ...

Большое спасибо!

Кевин

Answer 1

$('.homebutton').click(function(e){ 
    e.preventDefault(); //This will stop the jumping 
    $('html, body').animate({ 
     scrollTop: $("#home").offset().top 
    }, 1500);     
}); 

Кроме того, в качестве дополнительного бонуса, как о том, что все одна функция вместо одной функции для каждого пункта меню? Что-то вроде:

$("#homemenu a").click(function(e){ 
    e.preventDefault(); 
    var section = $(this).attr("href"); 
    $("html, body").animate({ 
     scrollTop: $(section).offset().top 
    }, 1500); 
}); 

Answer 2

Вот что у вас есть.

$('.homebutton').click(function(){ 
    $('html, body').animate({ 
     scrollTop: $("#home").offset().top 
    }, 1500);     
}); 

Если вы положили return false, это сделает трюк. Он также предотвращает действие по умолчанию.

$('.homebutton').click(function(){ 
    $('html, body').animate({ 
     scrollTop: $("#home").offset().top 
    }, 1500); 

    return false;     
}); 

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

например:

$('traverse to menu anchor').on('click', function() { 
    var target = $(this).attr('href'); 

    $('html, body').animate({ scrollTop: $(target).offset().top }, 1000); 
     return false; 
}); 

Надеется, что это помогает.