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

98

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

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

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

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

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

javascript jquery scroll scrollto
источник
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');
}
Тим
источник