Плавная прокрутка к элементам и началу страницы
При разработке лендингов (Landing Page) довольно часто можно увидеть плавный скролл (прокрутку) к блокам или элементам страницы. Так же, практически на любом сайте можно встретить зафиксированную на странице кнопочку, при клике на которую пользователь быстро возвращается в начало страницы. Сейчас мы и рассмотрим как делаются такие навороты.
Плавный скролл к элементу страницы
Разметка элемента, по нажатию на который будет происходить плавный переход:
<nav> <ul> <li><a href="#about">О нас</a></li> </ul> </nav>
Разметка самого элемента к которому будет идти плавный переход:
<div id="about">Это блок "О нас"</div>
И наконец-то скрипт с использованием jQuery, который будет делать плавный переход:
$(document).on("click", "nav a", function(e) { e.preventDefault(); var id = $(this).attr('href'); var top = $(id).offset().top; // получаем координаты блока $('body, html').animate({scrollTop: top}, 800); // плавно переходим к блоку });
Чтобы изменить скорость скролла, измените значение 800 на своё. Чем больше значение, тем медленнее переход. Для справки: 1000 = 1 секунда.
Прокрутка к началу страницы
Разметка кнопки:
<a href="#" class="go_to_top">Наверх</a>
CSS-стиль, который зафиксирует кнопку в нижнем правом углу:
position: fixed; right: 100px; bottom: 100px; background: #fff; display: inline-block; color: #000; font-size: 16px; padding: 0 15px; line-height: 26px; text-align: center; z-index: 100;
И скрипт, который будет отправлять пользователя в самый верх страницы:
$(document).on("click", ".go_to_top", function(e) {Реализацию описанного функционала можно посмотреть на вот этом сайте.
e.preventDefault(); $('body, html').animate({scrollTop: 0}, 800); });