JQuery анимация scrollTop

У меня есть несколько тегов section в div с переполнением, установленным на hidden. Код соответствует следующим строкам:


<div id="viewport">
   <section>
      content
   </section>
   <section>
      content
   </section>
</div>

Я настроил это так, потому что хочу прокручивать sections, содержащийся в div, когда в меню нажата соответствующая ссылка. У меня есть эта функция:


$('#mn a').click(function(){
   var aHref = $(this).attr("href");
   var sectionHeight = $('section'+aHref+'').height();
   $('#viewport').height(sectionHeight);
});

Что я использую для изменения размера div #viewport, потому что sections имеют разные размеры. Когда я пытаюсь поместить эту часть прокрутки в эту функцию:


$('body,html').animate({scrollTop: $(aHref).offset().top}, 800);

он прокручивает всю страницу. Когда я пытаюсь заменить $('body,html') на $('section, #viewport'), он прокручивается внутри div, но он не делает это правильно.

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

Ответ 1

Проблема заключается в том, как работает position(), он возвращает верхнюю/верхнюю длину, связанную с scrollTop.

Итак, если вы запрашиваете нажатие $('section'+aHref+'').position().top, то возвращаемая позиция изменяется от значения scrollTop.

Вы можете получить всю позицию по высоте в готовом событии. (поэтому scrollTop 0)

Или вы можете дезинфицировать значения позиции с помощью:

$("section#skills").position().top + $("#viewport").scrollTop()

Ответ 2

Прежде всего, вы должны запретить поведение якоря для по умолчанию, чтобы прокручивать страницу до верхней части страницы. Вы можете сделать это, вызвав метод preventDefault() для объекта события внутри обработчика события click. Попробуйте это

$('#mn a').click(function(e){
   e.preventDefault();

   var aHref = $(this).attr("href");
   var top = $('section'+aHref+'').position().top;
   $('#viewport').animate({scrollTop: top}, 800);
});

Ответ 3

Если вам нужен простой плагин jquery, вы можете попробовать (AnimateScroll), который в настоящее время поддерживает более 30 стилей стилей