Сложность
Описание
Создаем кнопку на нативном 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 равен нулю, то мы скрываем кнопку «Вниз», а кнопка «Наверх» остается.
Будет интересно посмотреть реализацию)
Здравствуйте Сергей!
Универсальная такая кнопка получится. Если будет время и желание, или необходимость, в будущем возможно сделаю.
Всего вам доброго!
Александр, спасибо за код и за объяснение. Очень толково сделан урок.