Кнопка «наверх» возвращает пользователя в начало страницы одним кликом. Это простая, но полезная функция UX, особенно для длинных страниц и одностраничных приложений. Ниже — рабочие шаблоны и рекомендации по улучшению: доступность, оптимизация и тесты.

Как создать кнопку «наверх» на JavaScript

Ниже — минимальный рабочий пример. Сохраняйте файлы отдельно: index.html, styles.css, script.js.

HTML

  
  
  


  
  



  
Scroll To Top

  

    
Scroll down to see the button.
    
Click the button to see smooth scroll to top.



    
Lorem ipsum dolor sit amet, consectetur adipiscing elit...


  

  

    
  

  

Кнопка ссылается на элемент с id=”top” (в примере — это ). Иконка — через Font Awesome.

JavaScript

// ===== Scroll to Top ==== 
const scrollTop = document.getElementById('scrolltop')

// При загрузке страницы скрываем кнопку
window.onload = () => {
  scrollTop.style.visibility = "hidden";
  scrollTop.style.opacity = 0;
}

// Показать кнопку при прокрутке более 200px
window.onscroll = () => {
  if (window.scrollY > 200) {
    scrollTop.style.visibility = "visible";
    scrollTop.style.opacity = 1;
  } else {
    scrollTop.style.visibility = "hidden";
    scrollTop.style.opacity = 0;
  }
};

Порог в 200 пикселей можно менять в зависимости от длины страницы и ожидаемого поведения.

CSS

html {
  scroll-behavior: smooth;
}

#scrolltop {
  display: block;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.5s ease-in;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 20%;
}

.top-button {
  text-decoration: none;
  cursor: pointer;
  padding: 30px;
  color: #222;
}

body {
  background: linear-gradient(180deg, #0697f9 0%, #f898bf 100%);
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  font-size: 24px;
  line-height: 1.4;
  text-align: center;
  padding: 40px;
}

.long-text {
  max-width: 700px;
  margin: 0 auto;
  padding: 40px;
  background: rgba(0, 0, 0, 0.2);
}

Совет: используйте плавную прокрутку через CSS (scroll-behavior: smooth) или анимацию в JS для старых браузеров.

Как создать кнопку «наверх» на jQuery

Пример с jQuery часто короче, но требует загрузки библиотеки.

HTML

  
  
  
  
  
  





  



  

    
Back to Top Button
    
Scroll down the page
    
Lorem ipsum dolor sit amet...


  

  

jQuery

// ===== Scroll to Top ==== 
var btn = $('#button');

$(window).scroll(function() {
  if ($(window).scrollTop() > 300) {
    btn.addClass('show');
  } else {
    btn.removeClass('show');
  }
});

btn.on('click', function(e) {
  e.preventDefault();
  $('html, body').animate({scrollTop:0}, '300');
});

CSS для jQuery-версии

#button {
  display: inline-block;
  background-color: #FF9800;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

#button.show {
  opacity: 1;
  visibility: visible;
}

.content { /* пример стилей для контента */
  width: 77%;
  margin: 50px auto;
  font-family: 'Merriweather', serif;
  font-size: 17px;
  color: #6c767a;
  line-height: 1.9;
}

Рекомендации по доступности и UX

• Добавьте aria-label (например, aria-label=”Наверх”) и tabindex, если элемент не является ссылкой.
• Кнопка должна быть фокусируемой клавиатурой (Tab) и работать на нажатие Enter/Space.
• Анимация должна быть недолгой: 200–400 мс — комфортный диапазон. Уважайте prefers-reduced-motion.

Пример учёта prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #scrolltop, #button { transition: none; }
}

Альтернативные подходы и улучшения

1. IntersectionObserver вместо window.onscroll — экономит ресурсы:

// Показать кнопку, когда элемент-признак пересёкся с viewport
const sentinel = document.querySelector('.long-text');
const io = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      scrollTop.style.visibility = 'visible';
      scrollTop.style.opacity = 1;
    } else {
      scrollTop.style.visibility = 'hidden';
      scrollTop.style.opacity = 0;
    }
  });
}, { root: null, threshold: 0 });
io.observe(sentinel);

2. CSS-only: если вам достаточно простой якорной ссылки и всегда видимой кнопки, можно обойтись без JS, применив anchor + scroll-behavior. Но условный показ/скрытие в зависимости от прокрутки требует JS.

3. Дебаунс/троттлинг обработчика scroll:

function debounce(fn, wait) {
  let t;
  return function(...args) {
    clearTimeout(t);
    t = setTimeout(() => fn.apply(this, args), wait);
  };
}

window.addEventListener('scroll', debounce(() => {
  // обработка прокрутки
}, 100));

Когда такая кнопка не нужна

• На коротких страницах (контент умещается без прокрутки).
• Если дизайн мобильного приложения уже предоставляет удобный жест/верхнюю панель.

Практические правила и эвристики

• Порог показа: 150–400 px — зависит от плотности контента.
• Время анимации: 200–400 мс; для людей с ограничениями — отключите анимацию.
• Положение: правый нижний угол — привычный и ожидаемый.

Чек-листы по ролям

• Разработчик:

  • Реализовать фокусируемую кнопку (aria-label, role/button при необходимости).
  • Использовать debounce или IntersectionObserver для производительности.
  • Поддержать prefers-reduced-motion.
  • Покрыть юнит-тестом поведение клика/появления.

• Дизайнер:

  • Убедиться в достаточном контрасте и размере кнопки.
  • Согласовать иконку и состояние наведения/нажатия.
  • Подумать о переводе и локализации aria-label.

• QA:

  • Проверить на клавиатуре (Tab, Enter, Space).
  • Проверить на мобильных/тач-устройствах.
  • Проверить поведение при разных разрешениях и при включённом reduced motion.

Критерии приёмки

• Кнопка появляется после прокрутки выше порога (например, 200px).
• Кнопка возвращает страницу в начало и фокус переходит в логичное место.
• Доступность: aria-label присутствует, кнопка фокусируется клавишей Tab.
• Производительность: нет заметных просадок FPS при прокрутке.

Мини-методология быстрой реализации

1. Добавьте элемент в HTML с aria-label.
2. Стилируйте позиционирование и состояния в CSS.
3. Реализуйте показ/скрытие через IntersectionObserver или debounced scroll.
4. Добавьте плавную прокрутку (CSS или JS).
5. Протестируйте доступность и мобильные жесты.

Факт-бокс: ключевые числа

• Типичный порог показа: 200–300 px.
• Рекомендуемая длительность анимации: 200–400 ms.
• Дебаунс/троттл интервал: 50–150 ms при обработке scroll.

Примеры тест-кейсов

• При загрузке страницы кнопка скрыта.
• После прокрутки ниже порога кнопка становится видимой.
• Клик по кнопке возвращает к началу и не ломает фокус.
• При prefers-reduced-motion анимация не применяется.

Важно: код в статье лицензирован MIT — можно адаптировать и использовать.

Итог

Кнопка «наверх» — небольшая, но заметно улучшающая удобство деталь интерфейса на длинных страницах. Вы можете реализовать её на чистом JavaScript, на jQuery или оптимизировать с помощью IntersectionObserver. Не забудьте про доступность и производительность.

Примечание: при интеграции в проект адаптируйте порог, стили и анимацию под конкретный продукт.