Очень полезная функция, которая оживит любой сайт и одностраничный лендинг.
Плавная анимация на jQuery по клику на ссылку
Напишем небольшую функцию. Обратите внимание, добавлять её через $.fn нет смысла, т.к. весь код занимает пару строчек. В другом случае мы бы рассмотрели этот интересный процесс :). Если хотите урок на эту тему дайте знать об этом в комментариях.
А теперь пишем код:
$(function(){ function scrollToAnchor(aid){ var aTag = $(".brand__item[data-id='"+ aid +"']"); $('html,body').animate({scrollTop: (aTag.offset().top - $('.header').outerHeight())},'slow'); return false; } });
Что делает эта функция. Для ответа мне понадобится дать вам часть HTML:
...<ul class="menu-brand__list"> <li><a href="#brand_0-9" class="menu-brand__link">0-9</a></li>...
...<div class="brand__item" data-id="#brand_0-9">...
По клику на фильтр 0-9, или по любому другому элемента из меню (про это будет чуть ниже) мы выполняем эту функцию.
Чуть ниже по коду у нас есть блоки, в data-id которых находится уникальный параметр, идентифицируемый этот блок. Строка, которая определяет расстояние до этого блока, также вычитает высоту зафиксированного плавающего хедера.
Чтобы это всё высчитать мы воспользуемся outerHeight:
$(‘html,body’).animate({scrollTop: (aTag.offset().top — $(‘.header’).outerHeight())},’slow’);
Полностью же код выглядит так:
$(function(){ function scrollToAnchor(aid){ var aTag = $(".brand__item[data-id='"+ aid +"']"); $('html,body').animate({scrollTop: (aTag.offset().top - $('.header').outerHeight())},'slow'); return false; } $(".menu-brand__link").on('click', function(){ var $id = $(this).attr('href'); scrollToAnchor($id); }); });
Разберем что добавилось. Вешаем обработчик на onclick. Наш единственный параметр находится уже в атрибуте href. Его то мы и записываем как id, и передаем в нашу функцию.
Анимацию можно задавать в виде миллисекунд. outerHeight, кстати говоря, учитывает padding, что дает более правильную картину, чем height.
UPDATE (14.11.2020): нашел такой код, может пригодится:
$(function(){ $('a[href^="#"]').click(function(){ var target = $(this).attr('href'); $('html, body').animate({scrollTop: $(target).offset().top}, 300); return false; }); });
Обычный scroll to top делаем, например, так:
jQuery(document).ready(function(cash) { $("html,body").scrollTop(0); });