Сижу, пилю лендинговый сайт как говорится с нуля, без движков, шаблонов, плагинов и прочих удобностей. Ну и задался вопросом, как же пользователь на этой махине будет быстро к шапке возвращаться, тем более делать её фиксированную уже несколько поздно — работа почти закончилась.

Вспомнился весьма очевидный вариант с кнопкой «вверх», которая появляется в углу страницы, как только пользователь начал прокручивать содержимое сайта.

Итак, поделюсь найденным и собранным воедино.

Добавляем кнопку «Вверх» на страницы сайта

Добавляем в самый конец шаблона, перед закрытием тела страницы:

<div id="scrollup"><img src="_img/up.png" alt="Вверх" /></div>

Ну и само собой добавляем в css-файл стиль для этой кнопки:

#scrollup {
	cursor: pointer;
	position: fixed;
	opacity: 0.6;
	padding: 15px 10px 10px;
	background: #FF6601;
	border-radius: 5px;
	right: 10px;
	bottom: 10px;
	display: none;
}

Сделали? Ок. Пока у нас ничего не появится, так как по умолчанию кнопка скрыта.

Заставляем работать кнопку «Вверх»

Работать будет за счет библиотеки jQuery
Подключить её есть много вариантов. Можно скачать свежую версию, можно же подгружать из одного из доступных репозиториев.
Я люблю отечественный продукт, по этому подгружаю обычно с Яндекса:

<script type="text/javascript" src="https://yastatic.net/jquery/2.1.4/jquery.min.js"></script>

Добавляем этот тег в конец тела страницы.
Теперь создаем js-файл с удобным для вас названием на хостинге и подключаем следом за jQuery (порядок не перепутайте):

<script type="text/javascript" src="_js/scrollup.js"></script>

Содержимое этого файла будет иметь следующее содержимое:

$(document).ready(function () {
    $("#scrollup").hide();
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) { $('#scrollup').fadeIn(); }
                                      else { $('#scrollup').fadeOut(); }
        });
        $(#scrollup img').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 500);//скорость скрола
            return false;
        });
    });
});

Сохраняем, проверяем и ловим профит.

Сделай приятное автору - поделись статьей в социальной сети.