Кнопка «наверх». Как сделать кнопку вернуться наверх?

Наверняка вы замечали на многих вебсайтах есть кнопка «наверх». Этот элемент просто необходим для длинных вебсайтов, или, например, блогов. Часто пользователи быстро скроллят сайт или статью что бы узнать, есть ли там то, что их интересует, и только потом возвращаются на начало и читают статью. Конечно, они могут вернуться просто поскролив колесиком, или с помощью панели справа. Но согласитесь, что гораздо удобнее нажать кнопку «наверх» и быстро переместиться в самое начало сайта.

Раз мы определились для чего она нам нужна, давайте приступим к её реализации. Если вы хотите сразу посмотреть готовый код с примером — добро пожаловать на codepen.

Кнопка «наверх» — HTML часть

HTML код для нашей кнопки достаточно простой. Мы всего лишь создаем <div>, в который мы поместим иконку стрелки вверх. Я буду использовать svg-код иконки, но вы можете использовать картинку, как всегда, с помощью тега <img />

<div id="back_to_top" class="back-to-top">
    <svg xmlns="http://www.w3.org/2000/svg" style="transform: rotate(270deg);" width="24" height="24" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>
</div>

CSS часть конпки

Тут так же ничего сложного нет. Указываем для кнопки position: fixed, что бы кнопки всегда отображалась на экране при скролле. Так же определяем где будет находиться кнопка. В моем случае, кнопка «наверх» будет находиться в правом нижнем углу, поэтому пишу bottom: 50px, right: 50px.

Так же важно показывать кнопку только после начала скролла, ведь от неё нет никакого смысла, если пользователь и так находиться вверху страницы. Для этого скроем кнопку за экраном с помощью bottom: -50px, и добавим для неё класс active, у которого bottom равно 50px. С помощью jQuery будем добавлять этот класс после начала скроллинга.

.back-to-top {
    background: #3E64FF;
    border-radius: 50%;
    position: fixed;
    bottom: -50px;
    padding: 10px 12px;
    right: 50px;
    cursor: pointer;
    transition: 0.3s all;
}

.back-to-top.active {
    bottom: 50px;
    transition: 0.3s all;
}

Javascript (jQuery) часть кода

Как и говорилось выше, показывать кнопку будем только после начала прокрутки. Для того, что бы после нажатия кнопки возвращать экран на верх сайта с анимацией — будем использовать код с этого урока.

$('.back-to-top').click(function () {
    $('body,html').animate({ scrollTop: 0}, 800); // 800 - Скорость анимации
});

$(window).scroll(function() { // Отслеживаем начало прокрутки
    let scrolled = $(window).scrollTop(); // Вычисляем сколько было прокручено.

    if(scrolled > 350) { // Если высота прокрутки больше 350 - показываем кнопку
        $('.back-to-top').addClass('active');
    } else {
        $('.back-to-top').removeClass('active');
    }
});

Спасибо, что прочитали! Если у вас остались любые вопросы — задавайте их на Youtube канале, или пишите мне в Telegram, с радостью помогу.

Так же буду благодарен, если вы ознакомитесь с другими моими уроками:
1. Анимация печати текста для сайта | Typed.js
2. Делаем прелоадер для вашего сайта