Прокрутка страницы к определенному элементу
Прокрутка страницы к определенному элементу
Функция плавной прокрутки страницы до определенного элемента в настоящее время одна из обязательных составляющих web-приложений и сайтов. Для ее реализации в современных браузерах есть специальный метод scrollIntoView(). С его помощью можно автоматически прокрутить страницу таким образом, чтобы нужный элемент попал в область видимости.
В параметрах опционально задается область элемента, которая обязательно должна присутствовать на экране - его верх или низ, а также стиль прокрутки. По умолчанию это просто быстрый переход, но предусмотрена и плавная прокрутка. В виде функции это можно изобразить следующим образом:
Code (JavaScript) : Убрать нумерацию
- function scroll_to (element_id, block_type) {
- var target=document.getElementById(element_id);
- if (target) {
- target.scrollIntoView({
- behavior: "smooth",
- block: block_type
- });
- }
- }
Для достижения однообразия с плавной прокруткой можно также воспользоваться собственной функцией. В ее основе лежит анимация, вызываемая через метод requestAnimationFrame. Эта функция обеспечивает плавную прокрутку, но только до верхней границы элемента, хотя в подавляющем большинстве случаев этого достаточно. Соответственно, единственным параметром для ее вызова будет ID элемента.
Code (JavaScript) : Убрать нумерацию
- function smooth_scroll_to (element_id) {
- var target=document.getElementById(element_id);
- if (!target) {
- return;
- }
- var container=target;
- var scroll_y=0;
- do {
- if (!(container=container.parentNode)) {
- return;
- }
- container.scrollTop+=1;
- }
- while (container.scrollTop==0);
- if (target!=container) {
- do {
- scroll_y+=target.offsetTop;
- }
- while (target=target.offsetParent);
- }
- var step=Math.max(
- 15,
- (scroll_y-container.scrollTop)/10
- );
- var chk=0;
- function single_step() {
- var old_y=container.scrollTop;
- container.scrollTop=Math.min(
- scroll_y,
- step+container.scrollTop
- );
- if (container.scrollTop>=scroll_y) {
- return;
- }
- if (container.scrollTop==old_y) {
- chk++;
- if (chk>10) {
- return;
- }
- }
- else {
- chk=0;
- }
- window.requestAnimationFrame(single_step);
- };
- window.requestAnimationFrame(single_step);
- }
Рабочий пример прокрутки страницы с использованием приведенных выше функций можно посмотреть на демонстрационной странице.
Просмотров: 38 | Комментариев: 0
Метки: JavaScript
Комментарии
Отзывы посетителей сайта о статье
Комментариeв нет
Добавить комментарий
Заполните форму для добавления комментария