Скролл до нужного места в документе

20 Сентября 2017

Одна из самых простых задач, которую себе можно представить в контексте работы с фронтендом любого приложения - это скроллинг до нужного положения в документе. Например, вам нужно при нажатии на ту или иную ссылку в документе сделать плавное перемещение до соответствующего места. Еще одна популярная задача - ответы в комментариях. Для того, чтобы пользователям было понятно, кто и на какой комментарий ответил, можно опять-таки оформить анимацию, которая будет плавно скроллить страницу к нужному элементу. В общем примеров много.

Для реализации воспользуемся моим плагином для jquery.

Использование крайне простое:

$(".link-with-href").animatedScrollToHref(".link-with-href",{
    delay: 1300,// длительность анимации
    addedHeight: 0,// Небольшое дополнение с скроллу
    afterScroll : function(){},// Callback-функция(если необходимо)
});

Уточню некоторые параметры:

По поводу задержки понятно, если говорить про 'addedheight', то использовать его можно в том случае, если у вас на странице присутствует, скажем, хедер с позиционированием fixed. В этом случае, чтобы хедер не мешал закрывал требуемый элемент нужно доскроллить до нужного места плюс высота этого самого хедера.(что, собственно, и позволяет реализовать данный плагин)

Также можно воспользоваться callback-фукнцией, если вы хотите дополнить анимационнй эффект. Например: скролл до нужного положения, и в дополнение к этому еще и подсветка элемента.

 

0
Комментарии

комментариев еще нету

Для того, чтобы выразить экспертное мнение, нужно авторизироваться