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

Question

следующие JQuery кода прокручивает страницу к первой ошибке в виде:

$('html,body').stop().delay(500).animate({scrollTop: $errors.filter(":first").offset().top -30},'slow'); 

Однако, если я заменю $('html,body') с именем контейнера элемента, такого как класс сНу $('.myDivClass') с фиксированным позиционированием, похоже, что он не работает. Он просто прокручивает в случайные места вверх и вниз с каждым представлением. Если элемент контейнера является чем-то другим, кроме html, body, он, похоже, не работает правильно.

Я не могу понять, что я делаю неправильно.

CSS-код контейнера элемента выглядит следующим образом (так что вы знаете, что я имею в виду):

.mcModalWrap1{ 
position:fixed; 
top:0; 
left:0; 
width:100%; 
padding:50px; 
background-image:url(images/overlay.png); 
overflow:auto; 
z-index:999; 
display:none; 
} 

Я попытался с помощью позиции() вместо смещения() для относительного позиционирования, но он не сделал разница.

Спасибо!

Обновление: похоже, для этого нет решения.

Answer 1

Если вы прокручиваете что-то, кроме окна, вам необходимо найти положение ошибки относительно его контейнера. В этом случае div. Если элемент находится в div, используйте вместо него position, который будет относиться к первому родителю с относительным, фиксированным или абсолютным позиционированием.

$('.mcModalWrap1') 
    .stop() 
    .delay(500) 
    .animate({scrollTop: $errors.filter(":first").position().top -30},'slow'); 

Answer 2

Решила проблему, сбросив идею. JQuery scrollTop не работает в родительском контейнере, отличном от html, body, чтобы перейти к определенной позиции. Он работает только для прокрутки вверх или вниз. Ни position(), ни offset() не вычисляют значение правильно.

Если у кого-то есть ответ, я бы с удовольствием узнал.

Answer 3

У меня была та же проблема. Он работает только при первом вызове.

Чтобы исправить это, вам нужно прокручивать вверх до каждого раза перед вызовом animate().

Так что я изменил мой:

$(element).animate({scrollTop: 500}); 

с

$(element).scrollTop(0); 
$(element).animate({scrollTop: 500}); 

Да, это правда, каждый раз, когда она прокручивается к началу первого, но без анимации и работает очень хорошо для меня.

Надеюсь, что это поможет.

Answer 4

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

При прокрутке внутри фиксированной позиционируемый элемент, по какой-то причине, вы должны добавить его собственный scrollTop в положение, к которому вы хотите прокрутки, так:

var position = $errors.filter(":first").position().top + $('. myDivClass').scrollTop() 
$('.myDivClass').animate({ scrollTop: position }) 

работал для меня.