Плавне навігація (прокрутка) сторінки до якоря

Плавне навігація (прокрутка) сторінки до якоря

У цьому прикладі я хочу показати вам як створити плавну навігацію (прокрутку) сторінки до якоря для вашого сайту. При натисканні на будь-який з пунктів меню відбувається плавний перехід без перезавантаження та оновлення сторінки до заданого блоку або елементу. Такий скролл називають ще «go to». Даний приклад ви легко можете застосувати при створенні свого сайту або для поліпшення вже існуючого проекту.

Для того щоб здійснювався перехід до потрібного місця (секції) на сайті, досить додати посилання на ідентифікатор потрібного блоку. Наприклад рядок коду нижче вказує на перехід з будь-секції сайту в блок B:

Ідентифікатор блоку B якого вказано в id секції:

Ефект плавної навігації досягається завдяки використанню невеликого скрипта, для роботи якого необхідно обов'язково підключити бібліотеку jQuery.

От і все! Тепер ви знаєте, як реалізувати ефект плавної прокрутки секції (блоку) сторінки до заданого якоря. Подивитися і скачатьдемо приклад ви можете нижче.

У цьому прикладі я хочу показати вам як створити плавну навігацію (прокрутку) сторінки до якоря для вашого сайту. При натисканні на будь-який з пунктів меню відбувається плавний перехід без перезавантаження та оновлення сторінки до заданого блоку або елементу. Такий скролл називають ще "go to". Даний приклад ви легко можете застосувати при створенні свого сайту або для поліпшення вже існуючого проекту. Для того щоб здійснювався перехід до потрібного місця (секції) на сайті, досить додати посилання на ідентифікатор потрібного блоку. Наприклад рядок коду нижче вказує на перехід з будь-секції сайту в блок B: Ідентифікатор блоку B якого зазначений ...

Проголосуйте за урок

Схожі статті