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 для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Вход

Поиск по сайту

Календарь

Ноябрь 2024
Пн Вт Ср Чт Пт Сб Вс
 123
45678910
11121314151617
18192021222324
252627282930