Плавная прокрутка к элементам и началу страницы

При разработке лендингов (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);
});