Как прокрутить окно с помощью функции 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); 

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

Answer 5

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

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

Answer 6

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

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

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

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