Анімований перехід на верх сторінки

27

Від автора: додаючи контент на сторінки Вашого сайту, може виникнути ситуація, коли його обсяг досить великий і для прочитання користувачеві доведеться прокручувати повзунок вертикального скролла на значну відстань. А це, погодьтеся, значно погіршить юзабельность Вашого сайту, так як щоб повернутися на верх сторінки до навігаційного меню, знову ж таки, доведеться виконувати прокрутку вертикального скролла. Тому в даному уроці ми з Вами створимо спеціальну посилання, яка буде здійснювати анімований перехід у верхню частину сторінки сайту.

Анімований перехід на верх сторінкиАнімований перехід на верх сторінки

1. Підготовка до уроку

Для сьогоднішнього уроку нам потрібна будь-яка html-сторінка з досить великим контентом, іншими словами необхідний сайт на якому відображена вертикальна смуга прокручування. Даний сайт я вже підготував і його вихідні файли будуть додані до даного уроку.

Далі нам знадобиться бібліотека jQuery, думаю Ви знаєте де її взяти, але на всяк випадок я Вам нагадаю. Перейдемо на сайт http://jquery.com потім переходимо по посиланню Download jQuery і зберігаємо цю бібліотеку, в тому місці де у Вас розташовані скрипти написані на мові javascript. У мене це папка js, тому в неї і зберігаю цю бібліотеку.

Для тих хто не знає jQuery — це спеціальна бібліотека, написана на мові javascript, яка містить великий набір різних методів і функцій по вибірці і маніпуляції елементами веб-сторінки.
Потім нам потрібно бібліотеки jQuery плагін, який дозволяє керувати повзунками прокручування, як горизонтальним, так і вертикальним. Назва даного плагіна jQuery scrollTo.

Плагіни — це спеціальні бібліотеки, які розширюють стандартний функціонал бібліотеки jQuery.

Тому давайте перейдемо за посиланням http://plugins.jquery.com/scrollto/ потім клікаємо по кнопочці Download now і зберігаємо цей плагін в папку зі скриптами, в нашому випадку папка js.

Тепер давайте підключимо викачані бібліотеки, для цього відкриваємо файл index.php і додамо наступний код:

Далі давайте створимо порожній файл, у якому будемо вести кодування на мові javascript і точно також підключаємо файл.

Тепер приступаємо безпосередньо до створення посилання.

2. Створюємо блок посилання

Насамперед необхідно створити блок який буде виконувати роль посилання. Для цього на сторінці, на якій Вам необхідно відображати цю посилання, додамо наступний код (у мене це головна сторінка і файл index.php):

Нагору

Даний код я додав в самий низ сторінки, тут вже дивіться, самі де Вам зручно розташовувати його, так як це вже залежить від тієї сторінки, на якій Ви хочете показати посилання. Тепер давайте подивимося в браузері, що у нас вийшло:

Анімований перехід на верх сторінки

Отже, блок відображається, тепер необхідно задати йому кілька правил css. Давайте це зробимо:

.top {
position:fixed;
left:90%;
opacity:0.6;
top:90%;
width:50px;
height:20px;
background-color:gray;
padding:10px;
cursor:pointer;
}

Знову ж таки, у Вас це будуть свої правила, які підходять для Вашого дизайну, але головне, не забувайте вказувати правило position та значення fixed. Тим самим Ви поставите фіксовану позицію для блоку посилання. Що б при переміщенні повзунка скрола цей блок завжди залишався в одному положенні. Так само я вказав позиції зліва і зверху (правила left і top), що б розташувати даний блок в правому нижньому кутку вікна браузера. Давайте тепер подивимося що у нас вийшло:

Анімований перехід на верх сторінки

Тепер блок посилання зайняв правильне положення, як я Вам і говорив у правому нижньому куті.

3. Кодуємо логіку скрипта

Отже, тепер, давайте перейдемо в порожній файл, що ми з Вами створили і додамо наступний код:

jQuery(document).ready(function() {
$(‘.top’).hide();
var win_h = $(window).height();
});

Тобто насамперед необхідно почати роботу з бібліотекою jQuery. Для цього вибираємо елемент document (повністю вся сторінка відкрита в браузері) і викликаємо обробник події ready(). Даний обробник спрацює після повного завантаження сторінки. І коли він спрацює виконається функція описана всередині нього. У тілі даної функції ми і будемо вести подальше кодування.

І першим ділом, потрібно приховати блок з посиланням. Так як ми з Вами домовилися, що спочатку посилання має бути прихована, і з’являтися тільки після переміщення повзунка скрола на певну відстань вниз. Це відстань нам потрібно задати — це може бути або постійне число, або приміром якийсь універсальний параметр. Я пропоную використовувати, у якості даного параметра висоту вікна браузера. Тобто якщо опустити повзунок скрола на величину, порівнянну з висотою вікна браузера, значить верхня частина сайту вже буде не видно користувачеві і можна показати блок з посиланням на верх.

Тому створюємо змінну win_h і зберігаємо в неї висоту вікна браузера. Для цього робимо вибірку елемента window (вікно браузера), використовуючи jQuery, і викликаємо метод height(), який поверне висоту вибраного елемента в пікселях.

Тепер коли, посилання прихована і у нас є висота вікна браузера, продовжуємо кодування, а саме — реалізуємо поява блоку посилання при переміщенні скролла:

$(window).scroll(function () {
if($(this).scrollTop() > win_h) {
$(‘.top’).fadeIn(500);
}
if($(this).scrollTop() <= win_h) {
$(‘.top’).fadeOut(500);
}
});

Тобто формуємо дві умови — перше, необхідно для показу посилання: якщо величина на яку перемістився повзунок скролла, більше ніж значення змінної win_h, значить необхідно показати блок з посиланням. Для цього вибираємо даний блок з його класу top, і використовуємо метод fadeIn(), який застосовується для показу вибраних прихованих елементів із заданою швидкістю (швидкість появи елемента), швидкість передається першим параметром цього методу (в нашому випадку це 500 мілісекунд).

Для того що б дізнатися на яку відстань переміститься повзунок скролла, необхідно вибрати елемент window (за допомогою jQuery) і викликати метод scrollTop(), який повертає поточне положення повзунка скролла.

І друге аналогічне умова, для вицвітання блоку з посиланням — якщо відстань на яку перемістити повзунок скролла, менше або дорівнює значенню змінної win_h, значить необхідно приховати блок посилання. Для цього вибираємо даний блок по класу top і застосовуємо метод fadeOut(), який приховує вибрані елементи з заданою швидкістю (в нашому випадку це 500 мілісекунд).

І тепер залишилось тільки реалізувати сам механізм переходу до верхньої частини сторінки, для цього давайте додамо наступний код:

$(‘.top’).click(function() {
$.scrollTo(0,’.header’,1000);
});

Дивіться, вибираємо блок з класом top і описуємо обробник події click(). Даний обробник спрацює, коли по вибраному елементу натиснути лівою кнопкою миші, в нашому випадку — обробник спрацює, коли клікнути по блоку з посиланням. Коли він спрацює виконається функція описана в ньому. І в цій функції ми викликаємо метод scrollTo(), даний метод належить директорії jQuery scrollTo і виконує плавне переміщення з заданою швидкістю по осях скрола. Як вертикальною, так і горизонтальною. Параметри, які передаються даним методом:

Координати по осі х — для скролла по горизонталі. Тобто в нашому випадку координата по даній осі 0, значить якщо на сторінці буде відображена горизонтальна смуга прокрутки і її перемістити на будь-яку відстань, то буде виконаний скрол по горизонталі до координаті 0.

Елемент до якого буде виконаний вертикальний скролл. У нашому випадку це блок з класом header, тобто шапка нашого сайту. Значить буде виконаний скролл вгору до шапці сайту.

Швидкість виконання переміщення по скроллу. У нашому випадку 1000 мілісекунд (1 секунда).

Тепер давайте перейдемо в браузер і подивимося що у нас вийшло:

Анімований перехід на верх сторінки

Як Ви бачите, все відмінно відпрацьовує — переміщаючи повзунок скролла на величину, порівнянну з висотою вікна браузера, з’являється посилання Наверх, клікаючи по ній виконується плавний скролл на самий верх сторінки, зі швидкістю 1000 мілісекунд. Тепер давайте на всякий випадок приведу весь код файлу script.js:

jQuery(document).ready(function() {
$(‘.top’).hide();
var win_h = $(window).height();
$(window).scroll(function () {
if($(this).scrollTop() > win_h) {
$(‘.top’).fadeIn(500);
}
if($(this).scrollTop() <= win_h) {
$(‘.top’).fadeOut(500);
}
});
$(‘.top’).click(function() {
$.scrollTo(0,’.header’,1000);
});
});

Другим параметром методу scrollTo можна передавати будь-які елементи, наприклад body або h2 і т. д При цьому буде виконано переміщення строго до цього елемента.

А на цьому даний урок можна завершувати. Вдалого Вам кодування і до нових зустрічей.