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

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

94 голосов
/ 07 мая 2009

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

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

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

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

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

Ответы [ 6 ]

314 голосов
/ 18 февраля 2011 
$('html, body').animate({scrollTop: $("#page").offset().top}, 2000);
94 голосов
/ 07 мая 2009

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

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

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

41 голосов
/ 09 августа 2010

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

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

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

15 голосов
/ 27 мая 2014

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

7 голосов
/ 07 мая 2009

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

$.scrollTo('+=100px', 800, { axis:'y' });
6 голосов
/ 16 апреля 2012

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

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