Решение: тег base и якоря ссылки

382 71 08 Ноября 2017, 10:41

Разработчики использующие html тег <base href="http://error-log.ru/"> сталкиваются с неправильной работой якорных ссылок. Т.е. ссылка на странице https://error-log.ru/blog/  на якорь #box перенаправит вас на страницу  https://error-log.ru/#box. Тег base активно используется в CMF MODX, поэтому и проблема актуальна для любителей этой платформы. Конечно, можно переделать ссылки в такой вид https://error-log.ru/blog/#box, но это уже будут костыли. 

Решить задачу можно переложив переход по якорю на странице на js. А так как библиотека jquery подключена на 70% сайтов, переложим решение на нее. Итак, сразу код:

	$("body").on('click', '[href*="#"]', function(e){
	  var fixed_offset = 100;
	  $('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 800);
	  e.preventDefault();
	});

Итак: при клике на ссылку, в которой есть якорь, мы производим анимированный переход по ссылке за 800 мс. fixed_offset - это отступ для перехода, если у вас есть прилипающее меню, как у нас на сайте. Чтобы при переходе меню не закрыло нужный блок. Если у вас нет фиксированного меню, установите значение fixed_offset — 0.

Теги: Решение jquery base ссылки якоря MODX
Другие статьи
Комментарии
Нашли решение?
Последние комментарии
Иван
Иван 1 год назад
1
Sadieff
Sadieff 2 года назад
17
Sadieff
Sadieff 2 года назад
2
Группа вконтакте