Плавный вертикальный скроллинг страницы

Во-первых, прошу извинить меня за большие пробелы, которые я не заполнял постами. Теперь надеюсь исправиться.

Во-вторых, сегодня я решил осветить для вас плавный скроллинг страницы при помощи jQuery. И я покажу вам не только решение, но и постараюсь объяснить все, что напишу. Это для того, чтобы вы сумели править скрипт для своих нужд.

Начинаем мы, как всегда, с Теории.
Имеем страницу, на которой, в определенных местах есть ссылки, кликая на которые мы вертикально перемещаемся по странице. Так как не все будут служить для этих целей, следовательно мы должны цеплять им какой-то идентификатор, именно для скроллинга страницы. Например дадим всем таким ссылкам класс.

Уже мы имеем для нашего скрипта привязку каких-то действий при клике на ссылки.

Теперь нам нужно перемещаться по странице. Стандартный jQuery позволяет управлять вертикальной прокруткой, о чем я вас познакомлю. Но есть специальные библиотеки, например ScrollTo, которые позволяют перемещаться вообще по всей странице в любом направлении.

Что же дает нам стандартный jQuery? У него есть стили для управления скроллингом, scrollTop. Вся фишка в том, что мы можем прицепить изменение значения у этого стиля к анимации. Тогда мы получим анимированнный вертикальный скроллинг.

Теперь объединим все наши мысли в один кусочек кода, другими словами сейчас я покажу вам свой пример выше сказанного.

И так, Практика.
Пример ссылки:
Опустится до #object

Скрипт:

$(function(){
$('.scr').bind('click',function(){ // Вешаем функции при клике на ссылке с классом .scr
Top = $(this.hash).offset().top; // Узнаем положение элемента, находящегося в href ссылки
$('html').animate({scrollTop: Top}, 1000, 'swing'); // Изменяем значение скроллбара на наше
return false; // Отменяем стандартное поведение браузеров
});
});


В общем-то и все. Вот только для некоторых нужд, мне нужно было привязывать якори перемещения не к объектам, а к самому низу или верху. Для этого, используются якоря, например как #top или #down. И, естественно мы модифицируем скрипт:

$(function(){
$('.scr').bind('click',function(){
if($(this).attr('href')=='#down'){
$('html').animate({scrollTop:$(document).height()}, 1000, 'swing'); // Расчитываем всю высоту страницы, и устанавлием эту высоту в качестве значения для позиции на странице
} else if($(this).attr('href')=='#top'){
$('html').animate({scrollTop:0}, 1000, 'swing');
} else {
$('html').animate({scrollTop: $(this.hash).offset().top}, 1000, 'swing');
}
return false;
});
});


И, поскольку у нас появилось постоянное значение, которое любой подстроит под себя. Это скорость анимации. Поэтому я вынес ее в переменную:

$(function(){
$('.scr').bind('click',function(){
var speed = 1000; // Скорость движения
if($(this).attr('href')=='#down'){
$('html').animate({scrollTop:$(document).height()}, speed,'swing');
} else if($(this).attr('href')=='#top'){
$('html').animate({scrollTop:0}, speed,'swing');
} else {
$('html').animate({scrollTop: $(this.hash).offset().top}, speed,'swing');
}
return false;
});
});

Пример работает.

[03.09.2010]: Нашими читателями было замечено, что Google Chrome не выполняет скроллинг. Как заметил Саша (прости, фамилию и сайт не знаю), достаточно анимацию привязывать к body: $(‘html,body’).

А теперь проблема, с которой я столкнулся. Нам известно время, расстояние постоянно меняется, следовательно скорость всегда разная. Поэтому для очень больших страниц, пример будет смотреться не очень эффектно.

Над решением этой проблемы, займусь в ближайшее время. Если у кого-то есть предложения или варианты, примеры или теория, прошу отписать в комментариях или на мои контакты.