Прокрутка страницы к определенному элементу

Функция плавной прокрутки страницы до определенного элемента в настоящее время одна из обязательных составляющих web-приложений и сайтов. Для ее реализации в современных браузерах есть специальный метод scrollIntoView(). С его помощью можно автоматически прокрутить страницу таким образом, чтобы нужный элемент попал в область видимости.

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

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

Рабочий пример прокрутки страницы с использованием приведенных выше функций можно посмотреть на демонстрационной странице.

Комментарии

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

Для вставки цитаты выделите текст и нажмите сюда

Имя*:

Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.

Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.