Вы здесь: Главная » CSS » Способы добавления плавной прокрутки страницы в CSS и JavaScript

Способы добавления плавной прокрутки страницы в CSS и JavaScript

Наверняка вы посещали страницы, которые плавно прокручивают контент при клике на ссылке к соответствующему блоку. Это красиво выглядит на лэндингах (LandingPage, или  посадочная страница), в которых пространство страницы разбито на части, или в больших статьях с содержанием. Такая прокрутка называется скроллингом (от англ. scroll).

Однако, это не только красиво, но и достаточно просто с точки зрения реализации.

Прокрутка страницы с помощью CSS

Для того чтобы плавная прокрутка происходила на всей странице, необходимо добавить свойство scroll-behavior: smooth для селектора html.

Если плавная прокрутка необходима в пределах какого-то контейнера, то это свойство назначают для него.

По умолчанию свойство scroll-behavior имеет значение auto, т.е. прокрутка будет обычной, без эффекта плавности.
Посмотрите пример, основанный на css-свойстве (открыть в новой вкладке):

Примечание: в каждом примере есть 5 ссылок вверху для прокрутки к блокам текста и ссылка со стрелкой в правом нижнем углу для возврата наверх страницы. Используйте их для тестов свойств и методов для плавного скроллинга страницы.

Ложкой дегтя для этого свойства будет неполная поддержка его браузерами. Вы можете посмотреть, какова она на скриншоте и на caniuse.com.

Поддержка свойства scroll-behavor браузерами

Поддержка свойства scroll-behavor браузерами

Поэтому рассмотрим, как сделать плавную прокрутку с помощью jQuery и JavaScript.

Скроллинг с помощью jQuery

Понятно, что для использования jQuery вам нужно будет сначала подключить эту библиотеку. Дальше нужно будет отслеживать клики по ссылкам, у которых есть хэш (#) и анимировать свойство scrollTop для селектора $('html, body').

Сам код будет небольшим:

Это решение является кроссбраузерным, хотя у него есть один недостаток - если на вашем сайте jQuery не используется для работы с другими объектами/плагинами, то подключать лишние 88кб или порядка 40кб в gzip-сжатом виде не очень интересно ради 10-15 строк кода.
Пример (открыть в новой вкладке):

Плавная прокрутка на JavaScript

Здесь тоже есть 3 решения, каждое из которых использует свой подход к созданию плавности прокрутки с помощью разных JS-методов.

Решение 1. Метод scrollIntoView()

Из документации на MDN узнаем, что

Метод Element.scrollIntoView() прокручивает текущий контейнер родителя элемента, так, чтобы этот элемент, на котором был вызван scrollIntoView() был видим пользователю.

Этот метод имеет параметры, подобные css-свойству scroll-behavior: smooth для прокрутки контента к элементу с нужным id, указанным в виде хэш в ссылке.

К сожалению, и тут не обошлось без "ложки дегтя" в виде поддержки браузеров. Давайте обратимся к caniuse.com и увидим такую картину:

Поддержка свойства scrollIntoView браузерами

Поддержка свойства scrollIntoView браузерами

К сожалению, нужное нам значение свойства behavior: 'smooth' поддерживается не всеми браузерами.

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

Пример прокрутки контента с помощью метода scrollIntoView() (открыть в новой вкладке)).

Решение 2. Используем window.scrollBy() для плавной прокрутки.

Тут все методы и свойства и имеют хорошую поддержку браузерами.

Код JavaScript предполагает, что на вашей странице нет абсолютно позиционированной или фиксированной шапки сайта (элемент <header>), в котором чаще всего размещаются ссылки-якоря на разделы страницы, поэтому переменная offsetTop (смещение сверху) сначала задана как 0.

Если же шапка сайта, например фиксирована (для этого в примере есть переключатель), то отступ сверху нужен и для <body> (задается в классе .for-fixed), и для всех тех блоков, на которые указывают ссылки. Поэтому в переменную offsetTop мы записываем расчетную высоту <header>.
Пример прокрутки контента с помощью window.scrollBy() (открыть в новой вкладке)).

Решение 3. Использование методов requestAnimationFrame() и window.scrollTo() для плавной прокрутки

Метод window.requestAnimationFrame() позволяет выполнить анимацию, используя в качестве параметра функцию, которая будет вызвана перед перерисовкой экрана в браузере. В примере функция имеет имя step и плавно прокручивает окно браузера к соответствующему блоку с помощью метода window.scrollTo() в зависимости от параметра velocity, который задан, как .8.

Посмотрите пример (открыть в новой вкладке):

Бонус

Для  тех, кто дочитал статью до конца - бонус в виде различных вариантов форматирования кнопки для скролла страницы вниз от Naoya. Хорошо подходит для шапки страницы.

See the Pen Demo: CSS scroll down button by Elen (@ambassador) on CodePen.18892

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *