Вступление

Всякий раз, когда у вас есть веб-сайт, который предлагает пользователям прокручивать большой объем вниз - предложение кнопки для прокрутки назад к началу - хороший жест!

В этом практическом руководстве мы узнаем, как создать анимированный Кнопка HTML / CSS / JS для прокрутки вверх в ванильном JavaScript.

Примечание: Исходный код и предварительный просмотр в реальном времени доступны на CodePen.

приступая к работе

Мы будем создавать функциональность с нуля и стилизовать ее. С помощью a querySelector(), мы выберем созданную кнопку и включим и выключим ее видимость в зависимости от того, где пользователь находится на странице, и запустим событие для прокрутки вверх при каждом нажатии.

Поскольку кнопка закреплена в определенном месте (внизу справа) с помощью атрибутов CSS position, разметка для этой функциональности может быть вставлена в любом месте элемента body вашего HTML-кода:

<div className="scroll-to-top">
    <span class="btn btn-position btn-style">^</i>
</div>

После добавления мы можем оформить кнопку и ее родительский элемент “`. Мы зафиксируем положение кнопки в правом нижнем углу, немного сдвинув ее снизу и с правой стороны:

.scroll-to-top {
  position: relative;
}

.btn-position {
  position: fixed;
  bottom: 40px;
  right: 25px;
  z-index: 20;
}

.btn-style {
  background-color: #551b54;
  border: 2px solid #fff;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  color: #fff;
  cursor: pointer;
  animation: movebtn 3s ease-in-out infinite;
  transition: all 0.5s ease-in-out;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

Мы установили “видимость” этой кнопки на “скрытую” по умолчанию, так что кнопка появляется только тогда, когда пользователь прокрутил вниз до определенной позиции (ось Y) - мы сделаем это, изменив ее свойство с помощью JavaScript позже. Наконец, давайте добавим * наведение курсора * и некоторую анимацию к кнопке, чтобы она не стояла на месте:

.icon-style:hover {
  animation: none;
  background: #fff;
  color: #551b54;
  border: 2px solid #551b54;
}

@keyframes movebtn {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

Реализация логики

Теперь, когда кнопка стилизована и невидима - давайте реализуем логику, которая делает ее видимой, как только пользователь прокручивает вниз. Мы выберем его с помощью querySelector() и прикрепим EventListener к элементу:

const scrollBtn = document.querySelector(".btn");

Теперь, основываясь на положении значения Y окна (сколько пользователь прокрутил по вертикали, начиная с “0”), мы установим visibility элемента на "visible" или "hidden", если значение Y ниже определенный порог:

const btnVisibility = () => {
    if (window.scrollY > 400) {
        scrollBtn.style.visibility = "visible";
    } else {
        scrollBtn.style.visibility = "hidden";
    }
};

Теперь у нас есть функция, которая при вызове проверяет, была ли веб -страница прокручена вниз до 400, и устанавливает visibility элемента button на visible, в противном случае она устанавливает его на hidden.

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

document.addEventListener("scroll", () => {
    btnVisibility();
});

Последний фрагмент кода, который мы захотим прикрепить к прослушивателю событий, - это логика для программной прокрутки пользователя назад, когда он нажимает кнопку. Функция scrollToTop() экземпляра window делает именно это! Мы можем установить, что такое \ “top", указав координату Y, и можем вызывать метод при каждом событии "click" на кнопке:

scrollBtn.addEventListener("click", () => {
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    });
});

Примечание: window.scrollTo() имеет параметр поведения, который указывает , должна ли прокрутка выполняться плавно (плавно) или мгновенно за один шаг (значение по умолчанию auto). ::: :::

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

Вывод

Прокрутка до верхней части страницы несложна - даже с прослушивателями событий и анимацией! В этом практическом руководстве мы узнали, как реализовать функциональность прокрутки вверх с помощью ванильного JavaScript и оформить кнопку.