Три способа добиться функции плавной прокрутки страницы вверх

JavaScript

задний план

Недавно был разработан паблик-аккаунт компании H5, и сделана функция нажатия на иконку для прокрутки вверх. Функция реализации относительно проста, вызовите напрямую window.scrollTo(0, 0), и одна строка кода завершена. Но как у осадного льва, как я мог предъявлять к себе такие низкие требования, поэтому я добавил к себе требование для достиженияПлавная прокрутка вверхфункция. После расследования и просмотра документов есть три программы.

Используйте CSS

Чтобы достичь наивысшего уровня функциональности, просто используйте для этого CSS. код показывает, как показано ниже:

html {
    scroll-behavior: smooth;
}

Роль этого стиля состоит в том, чтобы указать поведение прокрутки для элементов с полосами прокрутки, но он вступает в силу только тогда, когда пользователь выполняет навигацию вручную или когда API прокрутки CSSOM запускает прокрутку, и не влияет на прокрутку, вызванную поведением пользователя. Пока я праздновал, я открыл, можно ли использовать, и посмотрел на совместимость:

Дни собаки, или Честная и практичная реализация JS.

2. Используйте API-интерфейс Window.scrollTo

Все мы знаем window.scrollTo(x, y), который реализует функцию прокрутки до определенной позиции на странице путем передачи координат по осям x, y в документе. На самом деле, этот API также может передавать параметр, который является объектом, левое значение соответствует x в координатах, верхнее соответствует y в координатах, и есть значение поведения, которое позволяет вам настраиваем поведение прокрутки, а затем реализуем прокрутку таким образом.

window.scrollTo({
    left: 0,
    top: 0,
    behavior: 'smooth'
})

Вкусно, приготовь. Через несколько дней ко мне пришел продакт-менеджер с 5-метровым ножом и сказал, что эффект прокрутки в Safari странный, а физический осмотр крайне плохой. Поэтому я молча открыл документ MDN и прокрутил вниз:

Увидев эту картинку, хотя браузеры API почти поддерживают ее, опция option зависает прямо в Safari, поэтому я снова открыл stackoverflow и резюмировал окончательное решение.

3. Используйте requestAnimationFrame

Я часто вижу знаменитый requestAnimationFrame, но у меня нет возможности его использовать.В этот раз я могу попробовать. Мы знаем, что роль requestAnimationFrame состоит в том, чтобы указать браузеру выполнить входящую функцию обратного вызова перед следующей перерисовкой.Это поведение автоматически выполняется браузером за вас. Итак, есть следующий код:

const scrollToTop = () => {
    let sTop = document.documentElement.scrollTop || document.body.scrollTop
    if (sTop > 0) {
        window.requestAnimationFrame(scrollToTop)
        window.scrollTo(0, sTop - sTop / 8)
    }
}

Сделанный! ! ! Идеально! ! ! Несмотря на возбуждение, я все же открыл, могу ли я использовать его для проверки совместимости requestAnimationFrame:

Сегодня курица! ! !

Категории