Как сделать работу анимации jquery плавно?

Question

У меня этот код внутри моей html-страницы.

$('#buttonMenu').on('click',function(){ 
    var errDiv = $("#divWhichToMoveTo"); 
    errDiv.show(); 
    var pos = errDiv.position().top; 
    $("html, body").animate({ scrollTop: pos }); 
    }); 


    <li><a id="buttonMenu" title="Yea" alt="Yea" href="#">Yea</a></li> 

    <div id="divWhichToMoveTo"><strong>An error occured, oh noes!!</strong></div> 

Это предполагается сделать страницы прокрутки вниз (осторожно) до точки, где является «divWhichToMoveTo», когда пользователь попал в «buttonMenu». Он работает, но у меня есть несколько кнопок и несколько div в длинной странице. Иногда, переходя от одного к другому в разных точках html-страницы, я могу видеть за миллисекунду начало html-страницы до начала анимации и привести меня с той точки, где я до такой степени, что хочу приземлиться. Я что-то упустил?

Answer 1

Используйте вместо этого:

$('#buttonMenu').on('click', function (e) { 
    e.preventDefault(); 
    var errDiv = $("#divWhichToMoveTo"); 
    errDiv.show(function() { 
     $("html, body").animate({ 
      scrollTop: errDiv.offset().top 
     }, 1000); 
    }); 
}); 

e.preventDefault() предотвращает действие по умолчанию, которое должно идти в #. Это было причиной перескакивания страницы.

.position().top возвращал неправильное значение. Это использует .offset(), который получает смещение относительно документа и отлично работает.

Demo: http://jsfiddle.net/cEwQv/1/ (маржа только прикладной, так что было где-то для прокрутки)

Answer 2

Вы можете добавить время в миллисекундах, как это ->

$("html, body").animate({ scrollTop: pos }, 2000) 

1000 миллисекунд принимается как 1 секунду, если я правильно помню!

Answer 3

Добавление JavaScript: недействительным (0) вместо # в якорных ссылок также поможет

Для примера

написать

<a href="javascript:void(0)">Yea</a> 

вместо

<a href="#">Yea</a>