Подробное объяснение трех способов достижения функции плавной прокрутки страницы вверх.

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

Самый высокий уровень функциональности может быть достигнут с использованием только CSS. Код выглядит следующим образом:

 html {поведение прокрутки: плавный;}

Функция этого стиля — указать поведение прокрутки для элементов с полосами прокрутки, но он вступает в силу только тогда, когда пользователь перемещается вручную или API прокрутки CSSOM запускает прокрутку и не влияет на прокрутку, вызванную поведением пользователя. Как раз когда праздновал, открыл могу ли я использовать и проверил совместимость:

Черт побери, давайте просто реализуем это на JS.

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

 window.scrollTo({слева: 0, сверху: 0, поведение: 'гладкое'})

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

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

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

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

Сделанный! ! ! Идеальный! ! ! Воодушевленный, я включил вопрос «Можно ли использовать для проверки совместимости requestAnimationFrame»:

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.