простенький скрипт на jq который поможет вам быстро и плавно переместится вверх вашей странице на вашем сайте.

установка проста. в нижнею часть сайта данный код и все.

Код
<!-- Кнопка "Наверх" -->
  <button  
  type="button"
  id="scroll-top"
  aria-label="Вернуться наверх"
  style="
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background-color: #1a1a1a;
  color: white;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s, transform 0.2s;
  padding: 0;
  "
  >
  <svg
  viewBox="0 0 24 24"
  width="24"
  height="24"
  aria-hidden="true"
  style="fill: currentColor;"
  >
  <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/>
  </svg>
  </button>

  <script>
  document.addEventListener('DOMContentLoaded', () => {
  const scrollTopBtn = document.getElementById('scroll-top');

  // Показываем/скрываем кнопку при прокрутке
  const toggleScrollButton = () => {
  if (window.scrollY > 100) {
  scrollTopBtn.style.display = 'block';
  } else {
  scrollTopBtn.style.display = 'none';
  }
  };

  // Плавная прокрутка наверх
  const smoothScrollToTop = () => {
  window.scrollTo({
  top: 0,
  behavior: 'smooth'
  });
  };

  // Обработчики событий
  window.addEventListener('scroll', toggleScrollButton);
  scrollTopBtn.addEventListener('click', smoothScrollToTop);

  // Инициальный вызов для корректного отображения при загрузке
  toggleScrollButton();
  });
  </script>

Комментарии

Минимальная длина комментария - 50 знаков. комментарии модерируются
HTMLSTART » CSS3 - JS - SVG Примеры » Кнопки Вверх и Низ » плавный скроллинг вверх страницы для вашего сайта