1PROMTAI.RU

Простая кнопка вверх на 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. Эстетика: Может служить элементом дизайна, который добавляет функциональности и визуальной привлекательности сайту.

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

Метки: , ,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Рубрики

Календарь

Февраль 2025
Пн Вт Ср Чт Пт Сб Вс
 12
3456789
10111213141516
17181920212223
2425262728  

Спам заблокирован

Новые комментарии

Вход