Простая кнопка вверх на JS

Полный код кнопки на яваскрипт, плавная прокрутка вверх.

<button id="backToTop">Вверх</button> 
<script> 
// Получаем кнопку var myButton = document.getElementById("backToTop"); 
// Стилизуем кнопку 
myButton.style.position = 'fixed'; myButton.style.bottom = '20px'; myButton.style.right = '30px'; myButton.style.display = 'none'; 

myButton.style.fontSize = '16px'; myButton.style.cursor = 'pointer'; myButton.style.zIndex = '1000'; 

// Показать кнопку при прокрутке вниз window.onscroll = function() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { myButton.style.display = "block"; } else { myButton.style.display = "none"; } }; 
// Плавная прокрутка вверх myButton.onclick = function() { window.scrollTo({top: 0, behavior: 'smooth'}); }; 
</script>

Кнопка «Вверх» (или «Наверх») — это элемент интерфейса на веб-сайтах, который позволяет пользователям быстро прокрутить страницу обратно к верхней части. Она особенно полезна на страницах с длинным содержанием, где пользователям может понадобиться вернуться к началу, чтобы, например, увидеть заголовок, навигацию или другие важные элементы.

Вот несколько причин, почему кнопка «Вверх» полезна:

1. Удобство навигации: Позволяет пользователям быстро возвращаться к началу страницы, не прокручивая её вручную.

2. Улучшение пользовательского опыта: Делает сайт более удобным и интуитивно понятным, что может повысить удовлетворенность пользователей.

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

4. Повышение доступности: Помогает пользователям с ограниченными возможностями легче навигировать по сайту.

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

В целом, кнопка «Вверх» является простым, но эффективным инструментом для улучшения навигации на веб-сайте.

Метки: кнопка вверх, Простая, яваскрипт