Загрузка страницы..
Плавный скролл после нажатия на якорную ссылку
Для того чтобы реализовать плавный переход после нажатия по ссылке, нам необходимо будет написать небольшой скрипт, который отследит момент нажатия, выяснит на какой блок ссылается якорь и плавно прокрутит страницу до нужного места
Плавный скролл после нажатия на якорную ссылку
2016-04-08T12:04 08 апр 2016 12:04
Просмотров: 8496

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

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

Структура меню с якорными ссылками

Чтобы при нажатии по ссылке мы переходили к определенному блоку, абзацу, необходимо в атрибут href прописать имя идентификатора того блока на который мы хотим сослаться, например:
у нас есть блока <div id="main">...</div>, внутренняя ссылка на этот блок будет иметь следующий вид: <a href="#main"></a> Таким образом все ссылки ссылаются на ID блоков.
Вот и сам код меню из демо-примера:

<nav id="menu">
	<ul>
		<li><a href="#ex1">Link #1</a></li>
		<li><a href="#ex2">Link #2</a></li>
		<li><a href="#ex3">Link #3</a></li>
		<li><a href="#ex4">Link #4</a></li>
	</ul>
</nav>

Каждая ссылка ссылается на соответствующий блок:

<div id="content">
	<section id="ex1">
		...
	</section>
	<div class="separator"></div>
	<section id="ex2">
		...
	</section>
	<div class="separator"></div>
	<section id="ex3">
		...
	</section>
	<div class="separator"></div>
	<section id="ex4">
		...
	</section>
</div>

Скрипт плавного перехода к нужному блоку

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

$(document).ready(function(){
	$("#menu").on("click","a", function (event) {
		//отменяем стандартную обработку нажатия по ссылке
		event.preventDefault();

		//забираем идентификатор бока с атрибута href
		var id  = $(this).attr('href'),

		//узнаем высоту от начала страницы до блока на который ссылается якорь
			top = $(id).offset().top;
		
		//анимируем переход на расстояние - top за 1500 мс
		$('body,html').animate({scrollTop: top}, 1500);
	});
});

Каждую строку скрипта я прокомментировал, если остались вопросы пиши в комментариях к посту - помогу.



Комментарии: 3

комментарий Андрей
Андрей
2021-03-04T19:5104 мар 2021 19:51
Спасибо, работает
комментарий Модератор
Модератор
2016-04-09T07:3109 апр 2016 07:31
Evgen, добавили. Спасибо, что пользуетесь нашим сервисом :)
комментарий Evgen
Evgen
2016-04-08T10:0808 апр 2016 10:08
Спасибо. Ещё бы живой пример!

Добавить комментарий

up
Яндекс.Метрика Яндекс.Метрик