Плавный переход к якорю

Как правило при создании посадочных страниц (landing pages), на них размещается довольно много информации. На таких сайтах плавный скроллинг к его секциям придаст оформлению еще большую привлекательность. 

Для примера сделаем простенькую разметку:

See the Pen PNyxwO by Aleksei (@AmateR) on CodePen.light

 

Как видите при клике по ссылкам происходят скачки, что не очень красиво. Для того, чтобы все происходило плавно напишем небольшой jQuery код (не забудьте подключить саму библиотеку). Итак нам нужно обработать нажатия по ссылкам, отменить стандартное поведение, выяснить на какой блок ссылается якорь и анимировать переход.

В комментариях к коду я постарался объяснить за что он делает. И вот результат:

See the Pen mPzQWq by Aleksei (@AmateR) on CodePen.light

Посмотреть на весь экран можно тут

 

2 комментария

  1. Здравствуйте . Подскажите пожалуйста , я сделал блок (), потом в произвольных ссылках меню прописывал этот id через # , но все равно скролинг не работает , может быть Вы знаете как его сделать? Мой сайт qubhookah.beget.tech , то есть я хочу при нажатие на кнопку «Try»сделать скроллинг.
    Я думаю дело в каком то скрипте , но не как не могу понять в каком(

Оставить комментарий

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