Как при клике на ссылку добавлять в урл название?

Question

[Nikita Shchypylov]

У меня на лендинге реализована прокрутка к меню по клику и сейчас нужно сделать, что бы при клике по элементу в навигации добавлялся соответствующее название в урл
Вот html:

<li class="f_left">
				<a class="about-us" href="#about_us">про нас</a>
			</li>

<section class="medoff-about  module " id="about_us"></section>

JS:

function scrollDown() {
	$(".header__list").on("click", "a", function (e) {
		 e.preventDefault();
		
		var id = $(this).attr('href');
		var top = $(id).offset().top;
		var refTarget = $('.header__list a');
		
		$(".header__list a").removeClass(('active'));
		
		if (!refTarget.hasClass('active')) {
			$(this).addClass('active');
		} else {
			refTarget.removeClass('active');
			$(this).addClass('active');
		}
		//
		// if (windowRes <= 1024) {
		// 	$('body,html').animate({scrollTop: top})
		// }
		
		$('body,html').animate({
			scrollTop: top + 3
		}, 1500);
	});
}

Опять же, все сейчас работает, но нужно, что бы добавлялся в урл текст,например если клик по #about_us, то и в урл добавилось about_us
Спасибо

Answer 1

[trushka]

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

<a id="about_us" style="display:none"></a>
<section class="medoff-about  module "></section>

$(window).on('hashchange', function(){
    var id = location.hash, targ=$(id+'+section.module'); //запоминаем в targ нужный блок
    if (!targ[0]) return // выходим, если "левый" хэш, например, ввели вручную
    var top = targ.offset().top;
    $(".header__list a").removeClass(('active'));
    $('.header__list a[href="'+id+'"]').addClass('active');
    }
    //
    // if (windowRes <= 1024) {
    // 	$('body,html').animate({scrollTop: top})
    // }
    
    $('body,html').animate({
      scrollTop: top + 3
    }, 1500);
  });
}).on('load', function(){$(window).hashchange()}) // переходим к нужному разделу, если, напрмер, ссылку в новой вкладке открыли

Comments

[Nikita Shchypylov]

Ну, аплодирую стоя)
Спасибо
А данный способ не "костыльный"?

[trushka]

Nikita Schipilov, ну, смотря, что считать костылём.. Событие onhashchange для такого и придумали (даже в ие8 работает). Единственно, не знаю, насколько стандартизировано поведение браузеров при переходе к скрытым якорям - но вроде все одинаково на это не реагируют)

[Nikita Shchypylov]

trushka: Черт его знает, внезапно перестало работать(
Консоль молчит

[Nikita Shchypylov]

trushka: А, вот joxi.ru/4AkzJvnHBlen2q

[Nikita Shchypylov]

trushka: SyntaxError: missing ) after argument list

[trushka]

Ну, так закрывающую скобку забыл, вон оно даже показало где))

[Nikita Shchypylov]

trushka: Ставлю, но все остальное ломается

[Nikita Shchypylov]

trushka: Можешь ее переписать, пожалуйста?

Answer 2

[Роман Огарков]

$('a').on('click', function(event) {
	event.preventDefault();
	window.location =  $( this ).attr('href');
});

Comments

[Nikita Shchypylov]

Работает, но убивает мою анимацию(

[Роман Огарков]

Условие сделай

[Nikita Shchypylov]

Роман Огарков: О каком условии идет речь?

[Роман Огарков]

При клике сначала изменяй адресную строку, а потом проверяй по url и вызывай анимацию

[Nikita Shchypylov]

Роман Огарков: if (window.location = $(this).attr('href')) {

$('body,html').animate({
scrollTop: top + 3
}, 1500);
}
Как то так?

[Nikita Shchypylov]

Роман Огарков: Решил проблему выносом кода window.location в setTimeout

[trushka]

Nikita Schipilov: посмотри ещё мой ответ, там ещё дополнительные плюшки и проще всё)

Answer 3

[Roman]

HTML5 History API.

Только если уж делаете такое, не забудьте сделать и обратное. Чтобы человек, который скопирует адрес (example.com/about_us) попал именно в то место, куда нужно, если перейдет по ссылке из истории/закладки.

Answer 4

[Николай]

js не может добавлять что-либо в url.
Как вариант можно сделать переход по ссылке с каким-либо параметром, и проверив этот параметр "скролить" к нужному месту.

Comments

[xmoonlight]

Да-хоть бегущую строку караоке!

[Николай]

xmoonlight: он перейдёт по ссылке, но не отскроллит

[xmoonlight]

Николай: он никуда не перейдёт и отскроллит спокойно, если прописать это на JS.

[Николай]

xmoonlight: я и предложил именно такое решение, не находите?

[xmoonlight]

Николай: вы предложили якорную ссылку. А то, о чем я говорю - это совсем другое.

Answer 5

[xmoonlight]

Присоединяюсь к Роман!
Вам по сути нужно написать URL-роутер на основе HTML5 History API и в зависимости клика или GET-запроса, менять URL или делать переход на нужную часть Вашего SPA-приложения.

Comments

[trushka]

тут простой hashcange подойдёт лучше

Answer 6

[Максим]

а я совсем не давно задавался таким вопросом "как убрать из адресной строки ANCHOR" и самое прикольное что ответов на 4х форумах не было но решение пришло само