Як зробити кнопку «наверх» як вконтакте, дизайн і розробка сайту

Доброго вам дня. 🙂

Майже на всіх сайтах є кнопка, яка повертає користувача на верх сторінки, якщо той перебуває в самому низу або просто нижче верхньої частини сайту.

На моєму сайті вже є урок присвячений тому як зробити кнопку повернення вгору, можете подивитися цю статтю -

У цій же статті, хочу трохи модернізувати той урок і виконати нову кнопку в тому вигляді, в якому вона зроблена на сайті ВКонтакте.

Для тих, кого зацікавив даний вид і виконання кнопки повернення, пропоную приступити до втілення задуманого.

На самому початку Вам потрібно визначиться з бібліотекою jquery. Вам потрібно її підключити, якщо Ви цього не робили раніше.

Найчастіше бібліотеку підключають в шапці або підвалі сайту. Якщо Ви визначилися де краще це зробити, вставте наступний код

Після бібліотеки потрібно підключити скрипт, який буде виводити нашу кнопку і плавно повертати відвідувача до верху сторінки.

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

+100 - це висота в пікселях, при якій рух почне сповільняться, коли Ви піднімаєтеся.
-10 - висота в пікселях, які прокручує скрипт для підйому вгору.
20 - значення в мілісекундах, так само 0,02 секунди, за які прокручуються 10 пікселів що вказані вище.
> 200 - висота від верху сторінки, на якій кнопка зникає або з'являється в залежності від напрямку руху.
250 - час в мілісекундах одно 0,25 сек. Час анімації появи і зникнення.

Наостанок, потрібно додати стилі, для того, щоб задати коректний вид нашої кнопці, яка буде у вигляді напівпрозорої смуги з лівого боку.

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

А з якого боку Вам зручніше розміщення кнопки і краще зверху чи знизу?

На цьому все, спасибі за увагу. 🙂

Привіт дорогий друже

У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце