Эффект плавной прокрутки при переходе на ссылку #якорь?

Ссылка скопирована
1С
1 ответ

При нажатии на ссылку вида #anchor плавная прокрутка работает, при русскоязычной ссылке вроде #якорь - нет
Сайт на ВордПресс, тема астра.
Пробовал отдельным плагином jQuerySmoothScroll - та же проблема. Так понимаю, что код скролла не заточен под русский язык. Как это можно исправить?

Дополнительно:

как так? под русский язык заточен 1с, вроде бы ))

  • логично. якорь - это ссылка к id элемента. а id элемента должен быть написан только латиницей
  • iBird Rose, где это ты такое нашел? браузер отлично понимает все символы utf таблицы, есть только некоторые ограничения и служебные символы в ключевых местах
  • imko, ну тогда подскажи автору вопроса как решить его проблему
  • iBird Rose, ну а что мне делать я без тебя разберусь

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Анна SEO Ответ

    Русский якорь сам по себе допустим, но на практике плавная прокрутка часто ломается из-за JS-плагинов, которые ищут якорь регуляркой только по латинице, или из-за несовпадения кодировки в href и id. Самый надежный вариант: использовать латинские ID, а текст ссылки оставить русским.

    <a href="#delivery">Доставка</a>
 
<section id="delivery">
    ...
</section>

    <a href="#delivery">Доставка</a> <section id="delivery"> ... </section>

    Если нужно поддержать уже существующие русские якоря, используйте JS с decodeURIComponent() и CSS.escape():

    document.addEventListener('click', function (event) {
  const link = event.target.closest('a[href^="#"]');
 
  if (!link) {
    return;
  }
 
  const rawHash = link.getAttribute('href');
 
  if (!rawHash || rawHash === '#') {
    return;
  }
 
  const id = decodeURIComponent(rawHash.slice(1));
  const target = document.getElementById(id);
 
  if (!target) {
    return;
  }
 
  event.preventDefault();
  target.scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  });
});

    document.addEventListener('click', function (event) { const link = event.target.closest('a[href^="#"]'); if (!link) { return; } const rawHash = link.getAttribute('href'); if (!rawHash || rawHash === '#') { return; } const id = decodeURIComponent(rawHash.slice(1)); const target = document.getElementById(id); if (!target) { return; } event.preventDefault(); target.scrollIntoView({ behavior: 'smooth', block: 'start' }); });

    Для современных браузеров часто достаточно CSS:

    html {
  scroll-behavior: smooth;
}

    html { scroll-behavior: smooth; }

    Но если тема Astra или плагин уже перехватывает клики по якорям, его скрипт может мешать. Тогда отключите лишний smooth-scroll-плагин и оставьте один контролируемый вариант. Для SEO и поддержки сайта латинские якоря обычно проще: меньше проблем с копированием ссылок, кодировкой и сторонними скриптами.

    Перед внедрением на рабочем сайте проверьте решение на копии или хотя бы сделайте резервную копию изменяемого файла. После правки включите отображение ошибок, откройте проблемную страницу в обычном и приватном окне, проверьте консоль браузера и логи PHP. Если задача связана с WordPress, WooCommerce или ACF, дополнительно проверьте поведение после очистки кэша и после выхода из админки: часть ошибок видна только для незалогиненного пользователя.

    Если код работает только в одном шаблоне, лучше не оставлять его разрозненно в нескольких файлах. Вынесите повторяемую логику в функцию, небольшой плагин или template part, а в шаблоне оставьте только вызов. Так проще поддерживать решение после обновления темы, плагинов и PHP.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 0 ответов