Прокрутка к якорю jQuery

Опубликовано:

15.10.2025

views:

292

time:

4 минуты

комментарии:

Оставьте комментарий

автор:

Разработчик Вячеслав

Скопировать ссылку на статью

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

При отсутствии якорного блока на странице, скрипт перебросит пользователя на главную страницу, где этот блок подразумевается. Если же там блока не будет, будет открыта просто главная страница.

Так выглядит сам код:

$("a").click(function(evt){
	let anchor = $(this).attr("href");

	if ( anchor.length > 1 && anchor.substring(0, 1) == "#" && $(anchor).length > 0 ){
		evt.preventDefault();
		$("html, body").animate({
			scrollTop:  $(anchor).offset().top - 10
		}, 400);
	}
	else if ( anchor.length > 1 && anchor.substring(0, 1) == "#" && $(anchor).length <= 0 ){
		evt.preventDefault();
		let mainUrl = window.location.origin + "/" + anchor;
		window.location.href = mainUrl;
	}
	else if ( anchor.length <= 1 && anchor.substring(0, 1) == "#" ){
		evt.preventDefault();
	}
});

Разберем, как срабатывает плавный переход к якорю

Событие плавной прокрутки случается только в том случае, если указана «#» в начале ссылки. Если же строка начинается с иного символа, скрипт не отрабатывает, так как это не якорь.

Всего в программе 3 проверки:

Проверяет есть ли в ссылке якорь и существует ли блок, к которому можно сделать прокрутку. Если ДА, то event отменяется, и срабатывает плавная прокрутка.
Если же якорь имеется, но блока, куда прокручивать страницу нет, то отрабатывает 2 условие. Оно подразумевает, что блок, к которому должна идти плавная прокрутка находится на главной странице сайта, поэтому перекидывает на неё. Если же там его не окажется, будет просто показан главный экран.
Третье условие просто отменяет любое событие, если строка равна «#». Его можно убрать, если на сайте есть иная логика.

Таким образом я делаю плавную прокрутку к якорю на jQuery на своих проектах. Такая реализация хорошо работает на сайтах на WordPress, позволяя выводить верстку без изменений. Вся обработка всех якорных ссылок находится в одном месте в удобном скрипте.

Если понравилась моя реализация плавной прокрутки на jQuery, напиши комментарий 🙏

Комментарии

Отменить ответ

Содержание

Скрипт плавной прокрутки на jQuery
Разбор, как это работает

Оставьте заявку на разработку

Укажите удобный способ связи для комфортного общения