Краткое руководство о том, как прокрутить страницу браузера вверх с помощью JavaScript.
Иногда нам может понадобиться прокрутить страницу браузера вверх с помощью JavaScript.
В этой статье мы рассмотрим, как прокрутить страницу браузера вверх с помощью JavaScript.
Используйте метод window.scrollTo
Мы можем использовать метод window.scrollTo с координатами x и y для прокрутки в качестве аргументов соответственно.
Например, если у нас есть следующий HTML:
<div> </div> <button> scroll to top </button>
Затем мы можем написать следующий JavaScript, чтобы добавить дочерние элементы в div и заставить кнопку прокручиваться вверх страницы, написав:
const button = document.querySelector('button')
const div = document.querySelector('div')
for (let i = 0; i < 100; i++) {
const p = document.createElement('p')
p.textContent = i
div.appendChild(p)
}
button.addEventListener('click', () => {
window.scrollTo(0, 0);
})
У нас есть цикл for для добавления элементов с document.createElement .
А затем мы устанавливаем textContent на некоторый контент.
Затем мы вызываем appendChild для добавления элементов.
Затем мы вызываем button.addEventListener с 'click', чтобы добавить прослушиватель кликов.
Мы вызываем scrollTo с 0 и 0 для прокрутки вверх страницы.
Поэтому, когда мы нажимаем «прокрутить вверх», мы должны перейти к началу страницы.
Мы также можем изменить поведение прокрутки с помощью объекта, чтобы изменить поведение прокрутки.
Например, мы можем написать:
button.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: `smooth`
})
})
top устанавливается на 0 для прокрутки вверх.
behavior установлено на 'smooth', чтобы сделать прокрутку плавной.
Заключение
Мы можем прокрутить страницу вверх с помощью метода window.scrollTo.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
