Верные решения
появляются в процессе

Плагин плавной прокрутки к якорю WordPress

Плавный скроллинг при клике на якоря в меню WordPress

Плагин Anchor smooth scroll добавляет плавную прокрутку к якорям в WordPress. Пример применения - landing page, где все пункты меню привязываются к якорям соответствующих разделов лендинга.

Особенности плагина

  • Лёгкий и быстрый;
  • Плавная прокрутка к якорю при переходе по ссылке с другой страницы;
  • Можно задавать отступ сверху в пикселях, либо css-селектором на элемент, ниже которого должна прокручиваться страница к якорю;
  • Настройка скорости прокрутки;
  • Возможность добавления плавного скроллинга к собственным ссылкам на якоря в любом месте сайта (с помощью css-селекторов);
  • Возможность переопределить поведение якоря по умолчанию или включить плагин только при загрузке страницы.
  • Если в меню несколько ссылок на якоря с 1 страницы, то все они подсвечиваются. Плагин удаляет подсветку.

Вид страницы настроек плагина:

Вид страницы настроек плагина плавной прокрутки

Как добавить ссылку на якорь в меню WordPress

Для добавления ссылки на якорь в меню WordPess нужно перейти в пункт бокового меню Внешний вид->Меню:

добавление якоря в меню WordPress

И там добавить произвольную ссылку.

Как найти ID элемента в HTML 

Ссылки на якоря привязываются к ID элементов в коде HTML сайта.  Чтобы найти ID в коде сайта, нужно открыть инструменты разработчика  в браузере (для Google Chrome F12 или ctrl+shift+i).

Затем выбираем нужный элемент (ctrl+shift+c в Google Chrome ):

инструменты разработчика

В данном случае у заголовка нет id, поэтому нужно добавить id. Код заголовка будет выглядеть так:

<h2 id="anchor-id">Особенности плагина</h2>

После этого можно добавить ссылку на якорь в меню WordPress:

http://site.ru/#anchor-id

Добавление плавной перемотки к собственным ссылкам на якоря

Для добавления плавной перемотки к собственным ссылкам на якоря, например, создаваемым в редакторе при редактировании поста, нужно прописать для такой ссылки любой класс, например .my-custom-anchor-link, затем добавить этот класс в специальное поле на странице настроек плагина.

После добавления класса в настройки плагина все ссылки на сайте с таким классом, содержащие ID якоря, при клике будут плавно прокручивать страницу до элемента с соответствующим ID.

Вставка якоря в редакторе WordPress

Плагин добавляет кнопку в виде якоря в панель инструментов редактора TinyMCE. Вы можете прописать имя якоря, и вставить его в любое место редактируемого текста:

Добавление якоря в редактор WordPress

 


Обновлено: 14.11.2018

Вам помогла эта статья? Оцените!
(Пока оценок нет)
Загрузка...


Добавить комментарий

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