анимация jQuery scrollTop не работает должным образом

Question

Означает ли анимация свойство scrollTop неточно. Просьба проверить этот код, который я сделал в jsbin http://jsbin.com/ewulum/2/edit

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

благодарит заранее.

Answer 1

На самом деле это рабочая и анимационная jQuery scrollTop, работающая правильно. Просто добавьте height:2000px в body css. Когда вы нажимаете на третью, четвертую или пятую ссылку, она прокручивается вниз и, поскольку в разделе 5 нет места, чтобы остановить прокрутку. Добавьте место под ним или добавьте высоту на контейнер, чтобы решить вашу проблему.

Answer 2

Все кажется мне прекрасным. Наиболее актуальный код для перехода к конкретному элементу является:

$('html, body').animate({ scrollTop: $('#box').offset().top }, 2000); 

Вы можете добавить дополнительные пиксели, чтобы расположить его совершенно по мере необходимости.

$('html, body').animate({ scrollTop: $('#box').offset().top + 10 }, 2000); 

Я пошел в свой http://jsbin.com/ewulum/2/edit и сделал несколько изменений:

.wrapper { 
    width: 90%; 
    margin: 0 auto; 
    background:#ececec; 
    overflow: auto; 
    height: 250px; 
} 

JS файл

//event delegation 
$("#nav-wrapper").on("click", "a", function(e){ 

    var cur_el_href = $(this).attr("href"), 
     cur_el_top =$(cur_el_href).offset().top; 

    e.preventDefault(); 

    console.log("The current elem's href value is " + cur_el_href); 
    console.log("The target section's offset top is " + cur_el_top); 

$(".wrapper").animate({ 
    scrollTop:cur_el_top 
    }, 
    800, function(){ 
    //this callback is for demonstration only so as not to back to top when testing other links 
     $(this).animate({scrollTop:0}, 1000); 
    }); 

});