Главная » Создание сайтов » Верстка » Плавный вертикальный скроллинг страницы

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

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

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

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

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

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

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

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

И так, Практика.
Пример ссылки:
<a href="#object" class="scr">Опустится до #object</a>

Скрипт:
$(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').

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

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

Комментарии — 8 комментариев

  1. #9637 Ivan в 8:30, 29 апреля 2010:

    Ответить | Цитировать

    Полезно, спасибо!

  2. #9645 john wester в 15:23, 30 апреля 2010: (подписался)

    Ответить | Цитировать

    в хроме эта штука не работает, как быть?

  3. #9657 Миха в 6:57, 8 мая 2010:

    Ответить | Цитировать

    А правда, почему в Google Chrome не работает?(

  4. Хм... Chrome даже не распознает якорей. Над решением, нужно подумать. Если, например, при клике на ссылку рассчитывать координаты и двигаться по ним?..

  5. #10253 Саша в 8:44, 31 августа 2010:

    Ответить | Цитировать

    В Chrome scrollTop нужно применять к body. Пример:

    $('html,body').animate ({scrollTop: Top}, 1000)

  6. Саша, спасибо. Все просто ; ).

  7. #12672 Андрей в 4:30, 19 декабря 2011: (подписался)

    Ответить | Цитировать

    Немного некошерно указан поиск элемента в скрипте... Если мы выбираем определенный класс, то необходимо так же явно указать тег. В данном случае это $('a.scr'). Если мы ищем идентификатор, то указывать тег не нужно. Позволю объяснить почему. Когда скрипт обращается к дереву документа, то при значении '.scr' скрипт парсит все теги DOM, и лишь затем возвращает результат поиска. А когда мы явно указали тег, то парсер ищет нужный класс только указанного тега. В случае с айди все наоборот. Если мы явно укажем тег и айди, то парсер выберет сначала все теги, и лишь затем найдет объект по айди. Вместо того чтобы обратиться сразу по айди.

    Ссори за плотный набор. Утро, сон, пишу с мобилки :-)

  8. #12682 vanoID в 15:25, 20 декабря 2011:

    Ответить | Цитировать

    Андрес, тут мы описываем другой вариант скроллинга.

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Подписаться, не комментируя