jQuery animate scrollTop - PullRequest
Новая
       12

jQuery animate scrollTop

15 голосов
/ 14 декабря 2011

У меня довольно много тегов 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);
});

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


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

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

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

Ответы [ 3 ]

11 голосов
/ 14 декабря 2011

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

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

Вы можете получить всю высоту на готовом мероприятии. (поэтому scrollTop равно 0)

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

$("section#skills").position().top + $("#viewport").scrollTop()
8 голосов
/ 14 декабря 2011

Прежде всего вы должны запретить поведение якоря по умолчанию, чтобы прокрутить страницу до верхней части страницы.Вы можете сделать это, вызвав метод 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);
});
0 голосов
/ 12 сентября 2013

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

...