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

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

Как это работает?

Для начала нам необходимо сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>

<p><a name="top"></a></p>

В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки # впереди.

<p><a href="#top">Наверх</a></p>

Осталось добавить скрипт, который будет перехватывать клик по ссылке. Проще всего это сделать с помощью jQuery, поэтому перед скриптом мы осуществляем подключение библиотеки jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
	jQuery('a[href*=#]:not([href=#])').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			var target = jQuery(this.hash);
			target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
			if (target.length) {
				jQuery('html,body').animate({
					scrollTop: target.offset().top
				}, 1000);
				return false;
			}
		}
	});
});
</script>

Как Вы должно быть заметили из кода, обработка производится для всех ссылок, содержащих символ решетки # a[href*=#]. Для плавного перехода мы указали 1000 мс. Если Вы хотите производить более плавный или более быстрый переход, измените это значение в большую или меньшую сторону соответственно.

Еще одно преимущество данного метода — при переходе к якорю в адресной строке не появляется имени якоря. Если для Вас важно, чтобы в ссылке оставалось наименование якоря, просто удалите в скрипте строку return false;

Вы также можете скачать пример работы скрипта из вложения в конце статьи.