Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Якорь на jQuery. Плавная прокрутка до якоря

В современном сайтостроении даже простейшие вещи можно немного усложнить и они обретут второе дыхание. В данной статье это касается известного всем «якоря» — направление посетителя сайта не только на нужную страницу, но и на определенную ее часть.

Якорь на jQuery. Плавная прокрутка до якоря
Содержание статьи

Пару слов о "якорях"

Давайте вспомним, для чего вообще нужен якорь на странице и с чем его едят. Итак, якорь - это определенное место на странице, на которое можно направить пользователя, использовав символ # в адресной строке. После "решетки" должно идти имя якоря, например #interesting. Мы должны добавить это в конец адреса страницы, а пометить место, в котором будет располагаться "интересное" мы можем при помощи ложной ссылки с атрибутом name:


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

Итак, мы плавно подошли к тому, чтобы оправдать полезность данной статьи - в обычном html переход к якорю происходит моментально, в виде резкого скачка, что не всегда приятно наблюдать, да и потом пользователь не всегда может заметить, что клик по ссылке на что-то повлиял и страница уже прокрутилась к нужному месту. Мы же предлагаем решение, при котором базовая разметка останется точно такой же как в старые добрые времена и обычная механика якоря все равно будет работать при выключенном javascript в браузере. А мы с вами просто подключим библиотеку jQuery, а затем добавим небольшой скрипт плавной прокрутки до якоря при помощи jQuery.

Скрипт прокрутки якоря

Итак, давайте перейдем к самому скрипту, который вам нужно будет подключить после того, как подключена библиотека jQuery любой версии. Данный пример работает, если установить соответствующий id у необходимого элемента и не работает для атрибута name у тега a.

$(document).ready(function(){
	$("a[href*=#]").bind("click", function(e){
		var anchor = $(this);
		$('html, body').stop().animate({
			scrollTop: $(anchor.attr('href')).offset().top
		}, 500);
		e.preventDefault();
		return false;
	});
});

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

А теперь рассмотрим доработанный скрипт, который реагирует на старый атрибут name.

$(document).ready(function(){
	$("a[href*=#]").bind("click", function(e){
		var anchor = $(this);
		var name = anchor.attr("href").replace(new RegExp("#", "gi"), "");
		$('html, body').stop().animate({
			scrollTop: $("a[name=" + name + "]").offset().top
		}, 500);
		e.preventDefault();
		return false;
	});
});

А вот и пример работы данного творения:

открыть в новой вкладке

Итак, теперь вы знаете, как сделать старый добрый якорь немного более современней, привлекательней, эффектней и удобней 🙂

А о том, как сделать плавную прокрутку страницы в браузере мы уже писали в одной из наших статей.


Предыдущая статья:
Мигающий заголовок (title) в браузере на JavaScript

Читайте также:
Сколько дней между двумя датами. Калькулятор


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»