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

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

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

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

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

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 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.

Ответ 5

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

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

Ответ 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');
}