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

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

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

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

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

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

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

И там добавить произвольную ссылку. Нужно указывать полный путь: http://site.ru/#якорь.

Ссылки на якоря привязываются к 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. Вы можете прописать имя якоря, и вставить его в любое место редактируемого текста: