jQuery animate 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);
});

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


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

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

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


javascript animation jquery scrolltop
person ayyp    schedule 13.12.2011    source источник

Ответы (3)


arrow_upward
11
arrow_downward

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

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

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

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

$("section#skills").position().top + $("#viewport").scrollTop()
person InuYaksa    schedule 13.12.2011

arrow_upward
8
arrow_downward

Прежде всего вы должны предотвратить поведение привязки по умолчанию, чтобы прокрутить страницу до ее верха. Вы можете сделать это, вызвав метод 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);
});
person ShankarSangoli    schedule 13.12.2011
comment
У меня там был e.preventDefault(), но я подумал, что он что-то не так, поэтому вынул его. К сожалению, предложенное вами решение тоже не работает. - person ayyp; 14.12.2011
comment
Можете ли вы предупредить sectionHeight и посмотреть, что вы получите? - person ShankarSangoli; 14.12.2011
comment
255 за первый. Это заставляет его прокручиваться вперед и назад, но никогда полностью вниз. - person ayyp; 14.12.2011
comment
Я разместил его здесь: andrewpeacock.tumblr.com/testingscroll2 Сразу после загрузки, если я нажму на любой из ссылки работает отлично. Однако после этого он больше не работает. - person ayyp; 14.12.2011

arrow_upward
-1
arrow_downward

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

person Ram Patra    schedule 12.09.2013