Как прокручивать окно с помощью функции JQuery $ .scrollTo ()

98

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

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

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

alert("starting");
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
alert("finished");

Я знаю, что у меня есть страница jquery, связанная правильно, потому что я использую много других функций jquery повсюду, и все они работают нормально. Я также попытался удалить «px» сверху, и, похоже, это не имеет значения.

3

Сам JQuery работает нормально, но вы уверены, что у вас есть плагин scrollTo, связанный правильно? Измените одно из этих предупреждений на предупреждение ($. ScrollTo);

— Эндрю

97

Если он не работает, почему бы вам не попробовать использовать метод scrollTop в jQuery?

$("#id").scrollTop($("#id").scrollTop() + 100);

Если вам нужна плавная прокрутка, вы можете использовать базовую функцию javascript setTimeout / setInterval, чтобы она прокручивалась с шагом 1 пиксель в течение заданного периода времени.

— Фермин
источник

8

Обратите внимание: если вы хотите прокрутить всю страницу, а не отдельный элемент, используйте $ ('html, body'), как указал здесь Тим . Просто $ ('body') не будет работать во всех браузерах.

— i--

322

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

— Михай
источник

19

Я часто задавался вопросом, почему люди используют «html, body» для scrollTop вместо просто «html». Есть мысли по этому поводу?

— Скотт Гринфилд

+1 у меня сработало;) Мне тоже интересно знать, почему html, bodyвместо просто html?

— Kato

9

@ScottGreenfield, @Kato: не знаю, почему, но в этом комментарии говорится, что отсутствие включения bodyломает это в Chrome 4: stackoverflow.com/questions/1890995/…

— Yuji 'Tomita' Tomita

scrollTop: 0тоже работает нормально. Но продолжительность сокращается. Работает нормально, если установлена скорость 1000

— шашват

Это хорошее решение, пока вы не захотите добавить полный метод - он будет выполняться дважды. Решение @complistic более элегантно и предотвратит это.

— plankguy

41

jQuery теперь поддерживает scrollTop в качестве переменной анимации.

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100});

Для плавной прокрутки больше не нужно использовать setTimeout / setInterval.

— Тодд
источник

Есть некоторые синтаксические ошибки - отсутствует закрывающий {. В противном случае это хороший момент.

— Джошуа

1

Должно быть $("#id").offset().topвместо этого?

— codeulike 05

15

Чтобы обойти проблему с htmlvs body, я исправил это, не анимируя CSS напрямую, а вызывая window.scrollTo();на каждом шаге:

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

Это прекрасно работает без каких-либо проблем с обновлением, поскольку использует кроссбраузерный JavaScript.

Взгляните на http://james.padolsey.com/javascript/fun-with-jquerys-animate/ для получения дополнительной информации о том, что вы можете делать с функцией анимации jQuery.

— комплиристический
источник

1

Это великолепно. Я только изменил window.pageYOffsetк $(window).scrollTop()и window.scrollTo(0, val)к $(window).scrollTop(val)так что я не должен беспокоиться о совместимости браузера.

— leftclickben

1

Я никогда не думал передавать такой объект методу jQuery animate. Так много возможных применений. Это отличное решение, спасибо.

— Synexis

Да, техника - это значительный вклад. Раньше проблемы браузера можно было обойти, используя "window.scrollTo ()" напрямую, но это не позволяет ни "полный" обратный вызов, ни обещание. Спасибо @complistic за это решение. Также спасибо @leftclickben; Я реализовал его вариант с помощью ".scrollTop ()". Кроме того, статья "james.padolsey", содержащая ссылку, является краткой, и ее стоит прочитать.

— IAM_AL_X

Я думаю, что "window.scrollTo ()" должен быть совместим со всеми современными браузерами.

— IAM_AL_X

7

Похоже, у вас немного неправильный синтаксис ... Я предполагаю на основе вашего кода, что вы пытаетесь прокрутить вниз на 100 пикселей за 800 мс, если да, то это работает (с использованием scrollTo 1.4.1):

$.scrollTo('+=100px', 800, { axis:'y' });

— Alconja
источник

6

На самом деле что-то вроде

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top +
 parseInt($("#"+prop).css('padding-top'),10) },'slow');
}

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

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top 
+ parseInt($("#"+prop).css('padding-top'),10) 
+ parseInt($("#"+prop).css('margin-top'),10) +},'slow');
}

— Тим
источник