jQuery Как плавно выполнить скрол для ссылок с #

Очень полезная функция, которая оживит любой сайт и одностраничный лендинг.

Плавная анимация на 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);
});