← Все вопросы
Как заставить кнопку «Наверх» прокручивать страницу в начало?
5
Хочу кнопку, которая по клику плавно прокручивает страницу в самый верх. Видел такие на сайтах. Что писать в обработчике клика? Я новичок.
2 ответа
9
✓ Принятый ответ — помог автору
Для прокрутки есть встроенный window.scrollTo. Чтобы плавно уехать наверх:
<button id="top">Наверх</button>
document.getElementById('top').addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
top: 0 — координата самого верха страницы, behavior: 'smooth' делает прокрутку плавной (без него прыгнет мгновенно). Всё, кнопка работает.
3
Часто такую кнопку прячут, пока страница не прокручена вниз, и показывают только когда пользователь отлистал. Это уже следующий шаг — слушать событие scroll и переключать класс видимости:
window.addEventListener('scroll', function() {
const btn = document.getElementById('top');
btn.style.display = window.scrollY > 300 ? 'block' : 'none';
});
Но для начала достаточно самой прокрутки по клику.
Ваш ответ
Войдите, чтобы ответить на вопрос.