Вы можете использовать scrollTop () jQuery для настройки вертикальной полосы прокрутки.
Например, если ваша кнопка прокрутки вниз имеет идентификатор scrollDownButton
и вы хотите прокрутить страницу вниз на 100 пикселей, то следующий код сделает это.
$('#scrollDownButton').click( function() {
var currPosition = $('body').scrollTop();
$('body').scrollTop(currPosition + 10);
});
scrollTop()
даст вам текущую позицию вертикальной полосы прокрутки, а scrollTop(value)
установит ее в заданную позицию.
Если вы хотите прокрутить страницу вверх, вычтите ее из текущего значения, а не добавьте.
Примечание: Вы хотите выбрать, какой элемент имеет полосу прокрутки. В приведенном выше примере это был <body>
, но <html>
также является общим элементом. Также scrollTop () был реализован в JQuery 1.2.6, чтобы убедиться, что ваша версия достаточно новая.
Обновление: как анимировать свиток.
Если вы хотите анимировать свиток и увидеть, как это происходит, а не просто прыгнуть вниз или вверх, вы можете использовать следующий код:
$('#scrollDownButton').click( function() {
var currPosition = $('body').scrollTop();
$('body').animate({scrollTop: currPosition+100}, 'slow');
})
Обновление для Райана
Вот код для вашей конкретной страницы.
$('document').ready( function() {
$('#scrollDownButton').click( function() {
var currPosition = $('html').scrollTop();
$('html').animate({scrollTop: currPosition+100}, 'slow');
});
});