Кнопка вверх для прокрутки страницы сайта в начало

Александр Мальцев
Александр Мальцев
46K
13
Кнопка вверх для прокрутки страницы сайта в начало
Содержание:
  1. Шаг 1. Создание HTML и CSS для кнопки вверх
  2. Шаг 2. Написание JavaScript кода
  3. Использование другого SVG-изображения
  4. Изменение цвета фона и других свойств кнопки
  5. Кнопка с плавным появлением и скрытием
  6. Выезжающая снизу кнопка вверх
  7. Комментарии

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

Шаг 1. Создание HTML и CSS для кнопки вверх

Процесс создания кнопки вверх начнём с HTML-разметки. В качестве изображения будем использовать SVG-изображение, которое установим с помощью CSS как background-image.

HTML
<div class="btn-up btn-up_hide"></div>

Для стилизации кнопки добавим к ней следующий CSS:

CSS
.btn-up {
  position: fixed; /* фиксированная позиция */
  background-color: #673ab7; /* цвет заднего фона */
  right: 20px; /* расстояние от правого края */
  bottom: 0px; /* расстояние от нижнего края */
  border-top-left-radius: 8px; /* скругление верхнего левого угла */
  border-top-right-radius: 8px; /* скругление верхнего правого угла */
  cursor: pointer; /* форма курсора */
  display: flex; /* отображаем элемент как flex */
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
}

.btn-up::before {
  content: "";
  width: 40px;
  height: 40px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E");
}

.btn-up_hide {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn-up:hover {
    background-color: #512da8; /* цвет заднего фона при наведении */
  }
}

Шаг 2. Написание JavaScript кода

По умолчанию кнопка вверх не отображается. Показывать кнопку на странице будет только после того, как страница будет прокручена больше чем на 400px.

При нажатию на кнопку будем прокручивать страницу к началу с анимацией.

Для выполнения этих действий нам необходимо написать JavaScript код. Выполним это на чистом JavaScript:

JavaScript
const btnUp = {
  el: document.querySelector('.btn-up'),
  show() {
    // удалим у кнопки класс btn-up_hide
    this.el.classList.remove('btn-up_hide');
  },
  hide() {
    // добавим к кнопке класс btn-up_hide
    this.el.classList.add('btn-up_hide');
  },
  addEventListener() {
    // при прокрутке содержимого страницы
    window.addEventListener('scroll', () => {
      // определяем величину прокрутки
      const scrollY = window.scrollY || document.documentElement.scrollTop;
      // если страница прокручена больше чем на 400px, то делаем кнопку видимой, иначе скрываем
      scrollY > 400 ? this.show() : this.hide();
    });
    // при нажатии на кнопку .btn-up
    document.querySelector('.btn-up').onclick = () => {
      // переместим в начало страницы
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth'
      });
    }
  }
}

btnUp.addEventListener();

Здесь мы оформили код в формате объекта. В результате мы получили следующее:

Кнопка для прокрутки страницы вверх

Демо

Использование другого SVG-изображения

В примере приведённом выше мы использовали SVG-изображение. Вместо этого изображения можно использовать любое другое:

CSS
.btn-up {
  position: fixed;
  background-color: #673ab7;
  right: 20px;
  bottom: 20px;
  border-radius: 22px;
  cursor: pointer;
  width: 44px;
  height: 44px;
}

.btn-up::before {
  content: "";
  text-align: center;
  position: absolute;
  width: 20px;
  height: 20px;
  left: 12px;
  top: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17V4M3 10l7-7 7 7'/%3E%3C/g%3E%3C/svg%3E");
}

Кроме изменения SVG-изображения, мы также поменяли некоторые другие стили:

Круглая кнопка для перемещения в начало страницы

Демо

Изменение цвета фона и других свойств кнопки

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

Примеры квадратной кнопки в которой в качестве цвета фона (background-color) используется #3aa111:

Квадратная кнопка для перемещения в начало страницы

Демо

Кнопка с плавным появлением и скрытием

Чтобы кнопка плавно появлялась и исчезала можно воспользоваться CSS-переходами.

Для этого в CSS необходимо внести следующие изменения:

CSS
.btn-up {
  position: fixed; /* фиксированная позиция */
  background-color: #673ab7; /* цвет заднего фона */
  right: 20px; /* расстояние от правого края */
  bottom: 0px; /* расстояние от нижнего края */
  border-top-left-radius: 8px; /* скругление верхнего левого угла */
  border-top-right-radius: 8px; /* скругление верхнего правого угла */
  cursor: pointer; /* форма курсора */
  display: flex; /* не отображать элемент */
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease-in-out;
  width: 60px;
  height: 50px;
  opacity: 1;
}

.btn-up::before {
  content: "";
  width: 40px;
  height: 40px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E");
}

.btn-up_hide {
  display: none;
}

.btn-up_hiding {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .btn-up:hover {
    background-color: #512da8; /* цвет заднего фона при наведении */
  }
}

Также необходимо отредактировать JavaScript код, например, так:

JavaScript
const btnUp = {
  el: document.querySelector('.btn-up'),
  scrolling: false,
  show() {
    if (this.el.classList.contains('btn-up_hide') && !this.el.classList.contains('btn-up_hiding')) {
      this.el.classList.remove('btn-up_hide');
      this.el.classList.add('btn-up_hiding');
      window.setTimeout(() => {
        this.el.classList.remove('btn-up_hiding');
      }, 300);
    }
  },
  hide() {
    if (!this.el.classList.contains('btn-up_hide') && !this.el.classList.contains('btn-up_hiding')) {
      this.el.classList.add('btn-up_hiding');
      window.setTimeout(() => {
        this.el.classList.add('btn-up_hide');
        this.el.classList.remove('btn-up_hiding');
      }, 300);
    }
  },
  addEventListener() {
    // при прокрутке окна (window)
    window.addEventListener('scroll', () => {
      const scrollY = window.scrollY || document.documentElement.scrollTop;
      if (this.scrolling && scrollY > 0) {
        return;
      }
      this.scrolling = false;
      // если пользователь прокрутил страницу более чем на 200px
      if (scrollY > 400) {
        // сделаем кнопку .btn-up видимой
        this.show();
      } else {
        // иначе скроем кнопку .btn-up
        this.hide();
      }
    });
    // при нажатии на кнопку .btn-up
    document.querySelector('.btn-up').onclick = () => {
      this.scrolling = true;
      this.hide();
      // переместиться в верхнюю часть страницы
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth'
      });
    }
  }
}

btnUp.addEventListener();
Кнопка вверх с плавным появлением и скрытием, при нажатию на которую выполняется скроллинг в начало страницы

Демо

Выезжающая снизу кнопка вверх

В этом примере сделаем так, чтобы кнопка вверх появлялась снизу. Выполнять это будем с помощью CSS-свойств transform и transition. Кроме этого SVG-изображение вставим с использованием тега <svg>:

Кнопка вверх, которая выезжает снизу с помощью CSS-свойств transform и transition

Демо

Комментарии: 13

  1. Андрей
    Андрей
    2022-09-22 12:40:57
    Приветствую.
    Подскажите пожалуйста, как сделать, чтобы при появлении кнопка становилась «display: flex», а не block (удобнее позиционировать указатель)?
    И еще заметил, что после тапа на мобильном экране hover не возвращается в обычное состояние, то есть при следующей прокрутке кнопка получается с ховером.
  1. Александр Мальцев
    Александр Мальцев
    2022-10-01 06:43:38
    Привет! Статью обновил. Переписал все примеры на чистом JavaScript и исправил ошибку с hover для устройств с тач-экраном.
  • Elena
    Elena
    2020-02-01 23:14:37
    Здравствуйте! У меня не работает скрипт. Все сделано в точности, как у Вас. Но ошибка в отладчике:
    Uncaught TypeError: $(...).fadeIn is not a function
    at dispatch (VM292 jquery-3.3.1.slim.min.js:2)
    at v.handle (VM292 jquery-3.3.1.slim.min.js:2)
    Не та библиотека подключена?
    1. Александр Мальцев
      Александр Мальцев
      2020-02-02 05:04:45
      Здравствуйте! Это необходимо только для кнопки, реализованной с помощью jQuery. Сейчас всё написано на чистом JavaScript.
      Скорее всего вы используете slim-версию jQuery, которая не включает в себя модули ajax и effects. Следовательно, она не содержит такие функции как fadeIn и многие другие.
      Чтобы это исправить подключите обычную версию jQuery, например «jquery-3.3.1.min.js» или более новую.
    2. Elena
      Elena
      2020-02-02 15:16:58
      Спасибо большое! Подключила еще библиотеку 3.4.1, и заработало только тогда, когда удалила вообще slim версию! Спасибо Вам огромное за помощь, за сайт, за знания и доступные объяснения! Из огромного потока информации и обучающих порталов и сайтов – Ваш самый хороший, изложение более чем грамотное.
    3. Александр Мальцев
      Александр Мальцев
      2020-02-02 15:39:10
      Спасибо за отзыв!
  • Maxim
    Maxim
    2018-01-28 14:01:46
    Добрый день! Сделал по вашей инструкции, в консоли отладки Mozilla появилось сообщение: «Похоже, что этот сайт использует эффект позиционирования, связанный с прокруткой. Это может не очень хорошо работать с асинхронным панорамированием; см. developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects чтобы получить более подробную информацию и присоединиться к обсуждению связанных с этим инструментов и возможностей!»

    Стоит ли обращать внимание на это предупреждение?
    1. Александр Мальцев
      Александр Мальцев
      2018-01-29 15:01:38
      Да, можете на данное предупреждение не обращать внимание. Firefox его отображает, если обнаруживает наличие связанного с прокруткой эффекта на странице. Это касается прокрутки не в основном потоке, которое выполняется с опозданием. На указанной странице предлагается советы как это можно исправить.
      Но в скрипте для кнопки «Вверх» мы отслеживаем прокрутку в основном потоке и нас эти советы не касаются.
    2. Maxim
      Maxim
      2018-01-29 15:09:11
      Спасибо за оперативный ответ!
  • Денис Гедз
    Денис Гедз
    2018-01-14 23:16:47
    Спасибо Вам большое за прекрасный сайт! И отдельно за эту статью! Спасибо!
    1. pastukh88
      pastukh88
      2017-07-12 03:00:31
      Если не работает, то проверьте, нет ли у вас в css «height: 100%» для body. Если есть, то это решается так: codepen.io/anon/pen/IwGcF
      1. Roman
        Roman
        2016-06-12 13:09:45
        Честно говоря, это одни из самых понятных и «прозрачных» объяснений к урокам.
        Спасибо вам за ваш труд.
        1. Дмитрий
          Дмитрий
          2016-03-14 03:17:05
          Александр, статья, под которой нет «спасибо» :) Исправляю ситуацию — спасибо! :)
          Ваш сайт замечателен, а то, что вы делаете – очень полезно, уверен, многим.