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