Сложность
Описание
Создаем кнопку на нативном JavaScript, без jQuery. Создаем улучшенную кнопку, действующую как вверх, так и вниз.
HTML часть
Вначале разметка.
Добавляем в HTML тег a, задаем ему класс и заглавие(title). Содержимое тега будет спецсимвол ↑ он как раз и будет отображаться в виде стрелки. Важно заметить, что здесь у тега a нет атрибута href, т.к. он нам здесь не нужен.
<a class="back_to_top" title="Наверх">↑</a>
CSS часть
Пишем стили.
В будущем вы сможете изменить внешний вид кнопки, сейчас сделаем «базовую» модель. Записываем в CSS представленный код, он стандартный, отмечу только класс back_to_top-show, мы будем его добавлять/убирать у нашей кнопке средствами javascript. В начале(после загрузки страницы) у кнопки стоит класс back_to_top и соответственно display:none; т.е. кнопка не отображается, когда мы добавим кнопке класс back_to_top-show то display станет block и кнопка появится на экране.
.back_to_top {
position: fixed;
bottom: 80px;
right: 40px;
z-index: 9999;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
background: #f5f5f5;
color: #444;
cursor: pointer;
border-radius: 2px;
display: none;
}
.back_to_top:hover {
background: #e9ebec;
}
.back_to_top-show {
display: block;
}
JavaScript часть
Теперь JavaScript.
Мы создадим два обработчика:
- scroll, зарегистрируем его на window. Он будет отслеживать прокрутку документа(т.е. страницы) и в зависимости от нее будет добавлять/удалять нашей кнопке класс back_to_top-show.
- click, зарегистрируем его на саму кнопку. Он будет отслеживать нажатие на кнопку и приводить в действие скролл «наверх».
var goTopBtn = document.querySelector('.back_to_top');
window.addEventListener('scroll', trackScroll);
goTopBtn.addEventListener('click', backToTop);
Вначале отслеживаем прокрутку документа.
Мы задаем два условия(if) и в зависимости от срабатывания одного из них, мы нашей кнопке добавляем/удаляем класс back_to_top-show, а следовательно делаем ее «видимой»/»невидимой». Когда мы прокручиваем документ на «один экран», кнопка появляется, и наоборот.
function trackScroll() {
var scrolled = window.pageYOffset;
var coords = document.documentElement.clientHeight;
if (scrolled > coords) {
goTopBtn.classList.add('back_to_top-show');
}
if (scrolled < coords) {
goTopBtn.classList.remove('back_to_top-show');
}
}
Теперь отслеживаем клик по кнопке.
Логично предположить, что мы можем совершить клик по кнопке только тогда, когда обработчик scrollотработал и показал ее нам. Задача здесь в добавлении анимации(плавный скролл наверх). Я решил эту задачу с помощью метода setTimeout и рекурсии(т.е. функция вызывает сама себя). За каждый такой вызов функции, мы будем прокручивать страницу вверх, в коде значение -80 это и есть параметр прокрутки документа за один «шаг»(вызов функции). Чтобы понять как это действует, нужно понимать как действует рекурсия и метод setTimeout, еще можно попробовать изменить значение -80 и второй параметр в setTimeout т.е в данном случае он равен нулю, в зависимости от этих параметров мы можем делать прокрутку быстрее/медленнее.
function backToTop() {
if (window.pageYOffset > 0) {
window.scrollBy(0, -80);
setTimeout(backToTop, 0);
}
}
Готово!
Теперь соберем все воедино, переведем наш код в «строгий режим» путем добавления ‘use strict’; и обернем его в анонимную функцию, это нужно чтобы наши переменные не попали в глобальную область видимости( т.е. чтобы не было конфликта с другими нашими скриптами).
(function() {
'use strict';
function trackScroll() {
var scrolled = window.pageYOffset;
var coords = document.documentElement.clientHeight;
if (scrolled > coords) {
goTopBtn.classList.add('back_to_top-show');
}
if (scrolled < coords) {
goTopBtn.classList.remove('back_to_top-show');
}
}
function backToTop() {
if (window.pageYOffset > 0) {
window.scrollBy(0, -80);
setTimeout(backToTop, 0);
}
}
var goTopBtn = document.querySelector('.back_to_top');
window.addEventListener('scroll', trackScroll);
goTopBtn.addEventListener('click', backToTop);
})();
Заключение
Кнопка «Наверх» на чистом JavaScript. Как оказалось, её несложно сделать и без jQuery. Я приведу воспроизводимый код на Codepen, вы сможете еще раз все проверить и посмотреть в действии(в codepen добавлен еще один скрипт генерирующий цифры, он нужен для более наглядной демонстрации скролла, вам нужен только код отмеченный комментариями, на другой не обращайте внимания).
Вы также можете оставить свои комментарии здесь, или на StackOverflow_ru , где я выложил данный код на «инспекцию», а также задал свои дополнительные вопросы.
See the Pen Back-to-Top Button Vanilla JS by Alexandr Kazakov (@alexandr-kazakov) on CodePen.
Усовершенствованная кнопка
Бонус. Добавил прокрутку не только «наверх», но и «вниз» страницы. В некоторых случаях это может быть удобно. Здесь выложу только производимый на Codepen код, вы сами сможете все посмотреть.
See the Pen Back-to-Top/Bottom Button Vanilla JS by Alexandr Kazakov (@alexandr-kazakov) on CodePen.

Здравствуйте. Начну с примера: зашел на уже знакомый сайт и мне нужно попасть в подвал этого сайта.
Ваш скрипт работает примерно так: Зашел на страницу, теперь крутани колесико мыши вниз, появится кнопка «Вверх», нажимаешь кнопку «Вверх», тебя листанет вверх и только после появится кнопка «Вниз».
Правда не прикольно?
Что собственно хотелось бы видеть в скрипте. Например немного гибкости и удобства, как для изучения ваших читателей, так и для пользователей, которые зашли на их сайт.
1. Если TOP равен нулю, то кнопка «Вниз» уже по умолчанию должна отображаться, а кнопка «Наверх» скрыта.
2. Если пользователь не уперся впритык в TOP или BOTTOM и он находится на какой-то части страницы, то у него должно быть два варианта т.е. две кнопки «Наверх и Вниз».
3. Если BOTTOM равен нулю, то мы скрываем кнопку «Вниз», а кнопка «Наверх» остается.
Будет интересно посмотреть реализацию)
Здравствуйте Сергей!
Универсальная такая кнопка получится. Если будет время и желание, или необходимость, в будущем возможно сделаю.
Всего вам доброго!
круто, круто, круто, спасибо. а можешь ещё сделать так как вк чтоб если нажал вверх, потом вниз уже прокручивало на место где до этого был, а не в самый подвал, или это прям очень сложно?
Александр, спасибо за код и за объяснение. Очень толково сделан урок.
Спасибо за код!
Здравствуйте. Немного доработал Ваше решение (а именно пару строчек в backToTop()), т.к. разные по высоте страницы, требуют разной скорости скролла. Посмотрите, пожалуйста:
function backToTop() {
var scrollStep = document.body.scrollHeight / 100;
if (window.pageYOffset > 0) {
window.scrollBy(0, -(scrollStep));
setTimeout(backToTop, 0);
}
}
Даже получше нашел вариант: использовать не высоту страницы, а все тот же pageYOffset, для расчета скорости прокрутки. Тогда получается эффект плавного торможения в конце.
function backToTop() {
var scrollStep = window.pageYOffset / 40;
if (window.pageYOffset > 0) {
window.scrollBy(0, -(scrollStep));
setTimeout(backToTop, 0);
}
}
Спасибо, возможно кому-нибудь пригодится.
Привет!
Автор, я хоть и не пишу на JS, но мне кажется, ты изобретаешь велосипед. Твой код:
window.scrollBy(0, -80);
setTimeout(backToTop, 0);
Может быть заменён на:
window.scrollTo({ top: 0,
behavior: «smooth»
});
Насколько я понял твоё решение состоит в том, чтобы прерываниями обеспечить плавную прокрутку. При этом behavior: «smooth» делает то же самое, но средствами браузера и гораздо лучше на мой взгляд (при прокрутке длинной страницы происходит ускорение скролла).
https://developer.mozilla.org/ru/docs/Web/API/Window/scrollTo
Привет, Георгий. Может быть ты прав, надо попробовать. Спасибо.
Тоже об этом подумал. Но, судя по всему, в Safari в этом случае прокрутка будет не плавная.
https://caniuse.com/mdn-api_scrolltooptions_behavior
Вариант автора на сегодняшний день более кроссбраузерный.
Вдохновился статьей и переписал код на Vue,
https://github.com/AlexeyZelenko/vue3_typescript/blob/master/src/vue-button-up/src/components/VuejsHelloApp.vue
заодно сделал модуль для загрузки через npm для Vue2-Vue3.
https://www.npmjs.com/package/vue-button-up
Спасибо автору за статью. Интересно почитать другие Ваши наработки. Успехов!
Спасибо Алексей, и вам всех благ и успехов. Если вы сами пишите модули для npm, то навряд ли могли вдохновиться данной статьей, так как она больно проста 🙂
Hurrah, that’s what I was searching for,
what a data! present here
at this blog, thanks admin
of this site.