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

4045
480
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
ДРУГИЕ СТАТЬИ
Избавляемся от fatal error uncaught в php
fatal error uncaugh возникает, когда в коде PHP происходит исключение (exception), вне конструкции try-catch
935
112
28.03.2023
Исправляем ошибку cannot find module node js
Причины и решения ошибки в node.js - cannot find module
4321
518
27.03.2023
Ошибка E00e0 в API pointexpress.ru
Причины возникновения ошибки E00e0 в API pointexpress.ru
599
71
17.01.2023
Коды ошибок Telegram API
Коды возвращаемых ошибок от API Telegram
7754
930
06.12.2021
Комментарии
6 лет назад
страница в закладки
Класс все работает. Спасибо админ!!!
4 года назад
Как вариант, без такого рода вмешательст, если используется MODX EVO:
В ссылке, перед # прописать [~[*id*]~]
Получится: [~[*id*]~]#box
Результат: page#box
Если базовый url указан как https://site.ru/, то конечная ссылка будет https://site.ru/page#box
Автор статьи - лучший! Огромное человеческое спасибо! Месяц сидел не мог сделать!
Комментировать