Иногда требуется самодельная кнопка для прокрутки вверх

Слов в тексте – 103, время чтения в минутах – 1



Для создания кнопки ⬆️, которая позволит быстро вернуться на верх страницы, можно воспользоваться следующими кодами.

CSS


#scrollToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #ff6f61;
  color: #fff;
  padding: 10px 15px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: none;
  transition: all 0.3s ease;
}
#scrollToTop:hover {
  background: #e64a19;
}

HTML – добавить примерно такую кнопку


<div id="scrollToTop" onclick="window.scrollTo({ top: 0, behavior: 'smooth' });">
  ↑
</div>

Небольшой фрагмент JavaScript


document.addEventListener('scroll', () => {
  const scrollToTop = document.getElementById('scrollToTop');
  scrollToTop.style.display = window.scrollY > 200 ? 'block' : 'none';
});


 ⬇ Поделиться в соцсетях и мессенджерах



Популярные записи

Рубрики блога




newsbee Media