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

Question

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

Answer 3

jQuery теперь поддерживает scrollTop как переменную анимации.

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

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

Answer 4

Чтобы обойти проблему html vs 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.

Answer 5

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

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

Answer 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');
}