Nikulio
@Nikulio
NaN !== NaN

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

У меня на лендинге реализована прокрутка к меню по клику и сейчас нужно сделать, что бы при клике по элементу в навигации добавлялся соответствующее название в урл
Вот 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
Спасибо
  • Вопрос задан
  • 2955 просмотров
Решения вопроса 2
trushka
@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()}) // переходим к нужному разделу, если, напрмер, ссылку в новой вкладке открыли
Ответ написан
ogarich89
@ogarich89
Front-End Developer
$('a').on('click', function(event) {
	event.preventDefault();
	window.location =  $( this ).attr('href');
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
@r_zaycev
HTML5 History API.

Только если уж делаете такое, не забудьте сделать и обратное. Чтобы человек, который скопирует адрес (example.com/about_us) попал именно в то место, куда нужно, если перейдет по ссылке из истории/закладки.
Ответ написан
Комментировать
iNickolay
@iNickolay
js не может добавлять что-либо в url.
Как вариант можно сделать переход по ссылке с каким-либо параметром, и проверив этот параметр "скролить" к нужному месту.
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Присоединяюсь к Роман!
Вам по сути нужно написать URL-роутер на основе HTML5 History API и в зависимости клика или GET-запроса, менять URL или делать переход на нужную часть Вашего SPA-приложения.
Ответ написан
LenovoId
@LenovoId
svg, css,js
а я совсем не давно задавался таким вопросом "как убрать из адресной строки ANCHOR" и самое прикольное что ответов на 4х форумах не было но решение пришло само
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
01 мая 2024, в 02:11
5000 руб./за проект
01 мая 2024, в 00:29
2000 руб./за проект
01 мая 2024, в 00:20
15000 руб./за проект