Angular директивы

Smooth Scroll — это легковесная библиотека для плавной прокрутки страниц к заданным элементам. Она полностью управляется через JavaScript и позволяет создавать анимацию прокрутки без сторонних фреймворков, обеспечивая плавный UX при навигации по странице.

Для подключения библиотеки необходимо скачать пакет через npm или подключить через CDN:

// Через npm
npm install smooth-scroll

// Через CDN
<script src="https://cdn.jsdelivr.net/npm/smooth-scroll@16/dist/smooth-scroll.polyfills.min.js"></script>

После подключения создаётся экземпляр Smooth Scroll:

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 500,
  offset: 0,
  easing: 'easeInOutCubic',
  updateURL: true,
  popstate: true
});

Ключевые параметры:

  • speed — длительность анимации в миллисекундах.
  • offset — смещение от начала целевого элемента.
  • easing — тип функции анимации (например, linear, easeInOutCubic).
  • updateURL — обновлять ли URL при прокрутке.
  • popstate — обрабатывать события истории браузера.

Работа с якорными ссылками

Smooth Scroll автоматически обрабатывает ссылки вида <a href="#section1">. Прокрутка до целевого элемента выполняется с плавной анимацией. Можно использовать кастомные селекторы, например:

const scroll = new SmoothScroll('.nav-link', {
  speed: 700,
  offset: 50
});

В этом примере будут обрабатываться все ссылки с классом nav-link. Смещение 50 пикселей позволяет учитывать фиксированные шапки.

Программное управление прокруткой

Помимо автоматической обработки ссылок, Smooth Scroll позволяет программно инициировать прокрутку к элементу:

const scroll = new SmoothScroll();

const section = document.querySelector('#about');
scroll.animateScroll(section, null, {
  speed: 800,
  easing: 'easeInOutQuad'
});

Здесь animateScroll принимает три параметра: целевой элемент, ссылка (опционально) и объект с настройками анимации.

Настройка поведения анимации

Функции плавности:

  • linear — постоянная скорость.
  • easeInQuad, easeOutQuad, easeInOutQuad — квадратичные функции ускорения/замедления.
  • easeInCubic, easeOutCubic, easeInOutCubic — кубические функции для более мягкой прокрутки.

Смещение (offset) особенно важно для фиксированных шапок. Оно задаётся в пикселях и гарантирует, что элемент не будет скрыт за шапкой:

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 600,
  offset: 100
});

Отслеживание событий прокрутки

Smooth Scroll предоставляет события для интеграции с другими скриптами:

document.addEventListener('scrollStart', function(event) {
  console.log('Прокрутка началась', event.detail);
});

document.addEventListener('scrollStop', function(event) {
  console.log('Прокрутка завершена', event.detail);
});

События scrollStart и scrollStop передают объект detail с информацией о целевом элементе, скорости и текущей позиции.

Работа с динамически добавленными элементами

Если на страницу добавляются новые ссылки или элементы после инициализации Smooth Scroll, необходимо пересоздать экземпляр или вызвать метод destroy и создать новый:

scroll.destroy();
const scroll = new SmoothScroll('a[href*="#"]', { speed: 500 });

Это гарантирует корректное поведение всех ссылок, включая динамически добавленные.

Обработка истории браузера

Опция popstate позволяет корректно обрабатывать переходы назад/вперед в истории:

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 600,
  popstate: true
});

При навигации с помощью кнопок браузера Smooth Scroll автоматически выполнит анимацию к нужной секции.

Интеграция с Angular

В Angular Smooth Scroll можно использовать в директивах для абстракции логики прокрутки. Пример создания директивы:

import { Directive, HostListener, Input } from '@angular/core';
import SmoothScroll from 'smooth-scroll';

@Directive({
  selector: '[appSmoothScroll]'
})
export class SmoothScrollDirective {
  @Input('appSmoothScroll') targetId: string;

  private scroll = new SmoothScroll();

  @HostListener('click', ['$event'])
  onClick(event: Event) {
    event.preventDefault();
    const target = document.querySelector(this.targetId);
    if (target) {
      this.scroll.animateScroll(target);
    }
  }
}

С помощью этой директивы можно добавлять плавную прокрутку через атрибут:

<a appSmoothScroll="#section1">Перейти к секции</a>

Советы по оптимизации

  • Использовать минимально необходимые селекторы для инициализации Smooth Scroll, чтобы снизить нагрузку на DOM.
  • Избегать чрезмерно длительных анимаций (более 1000–1200 мс), так как это может раздражать пользователей.
  • Для мобильных устройств можно задавать отдельные скорости или отключать анимацию, чтобы улучшить производительность.
  • События scrollStart и scrollStop подходят для отслеживания видимости элементов или запуска анимаций при прокрутке.

Расширенные возможности

Smooth Scroll поддерживает:

  • Callback функции для выполнения кода после завершения анимации.
  • Кастомные easing функции, если стандартные не подходят.
  • Интеграцию с SPA, обновляя URL и обеспечивая правильное поведение навигации.

Пример использования callback:

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 700,
  after: function(anchor, toggle) {
    console.log('Прокрутка завершена к', anchor);
  }
});

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

Оглавление