Блог/Удаление якоря из ссылки

Удаление якоря при нажатии на ссылку

Автор: Кудашев Сергей

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

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

Итак, у нас есть ряд ссылок, в которых присутствуют якоря и при нажатии на которые мы не хотим, чтобы якорь попадал в URL. При этом, если при нажатии на данную ссылку якорь уже есть, мы его будем удалять, но сразу оговоримся, что данное такое поведение должно применяться только к ссылкам, у которых назначены якоря. Не буду приводить пример полного меню, возьмем только один элемент:

<a href="http://site.com/test.html#anchor" class="test">Перейти к якорю</a>

Воспользуемся следующим кодом на javascript, только не забудьте, что должна быть подключена библиотека jQuery:

$('.test').click(function(e){
	var anch = this.hash.slice(0);
	if(!anch || !anch[0] === "#") return;
	e.preventDefault();
	window.location.hash = '';
	var offset = $(anch).offset();
	$("html, body").animate({scrollTop:$(anch).offset().top},100);
	if(history.pushState) { history.pushState({}, null, window.location.pathname); }
});

Небольшие пояснения по коду. Мы получаем якорь из текущей ссылки. Если ссылка не содержит якорь или что-то пошло не так, мы возвращаемся к нормальному выполнению клику по ссылке. Если же якорь имеется, то мы останавливаем переход по ссылке (e.preventDefault()) и обнуляем имеющийся на данной странице якорь (window.location.hash = '';). После этого мы переходим на нужный нам элемент id который должен соответствовать коду полученного от ссылки якоря. После чего, если браузер поддерживает history.pushState, то мы обновляем текущую историю, убирая из нее якорь.

Вот такая вот реализация данного функционала. Надеюсь кому-то пригодится :)

Комментарии (1)

  1. Виталий12 июня 2021, 04:53#
    Спасибо! Работает отлично!