Якорное меню для WordPress сайта без плагинов. Плавный скролл для меню.

Сегодня я вам покажу как сделать якорное меню для сайта на WordPress без использования плагинов. Для реализации данного эффекта вам нужно будет прописать небольшой JavaScript скрипт.

Мы будим делать якорное меню из стандартного меню для WordPress, прописывая специальный JavaScript скрипт.

<script type="text/javascript"> 
  /*функция для скрола*/
  /* https://prog-time.ru/plavnyj-skrolling/ */
  function slowScroll(id) { 
      var offset = 0;
      $('html, body').animate({ 
          scrollTop: $(id).offset().top - offset 
      }, 1000);
      return false; 
  };

  /*запускаем после полной загрузки страницы*/
  document.addEventListener('DOMContentLoaded', function() {
    /*получаем все элементы меню*/
    var menu_item = document.querySelectorAll('ul#menu-menu_header li a');
    /*создаем переменную для записи ссылки для  атрибута href */
    var attr_href;
    /*перебираем масиив ссылок*/
    for(i=0; i<menu_item.length; i++) {
    	  /*записываем атрибут href*/
          attr_href = menu_item[i].getAttribute('href');
          /*добавляем атрибут onclick с функцией для якорного меню*/
          menu_item[i].setAttribute('onclick', "slowScroll('" + attr_href + "')");
          /*удаляем атрибут href*/
          menu_item[i].removeAttribute('href');
    }
  });
</script>

В этой части кода мы находим ссылки созданного меню и записываем их в переменную в виде массива.

var menu_item = document.querySelectorAll('ul#menu-menu_header li a');

После мы перебираем массив ссылок через цикл for, где записывает значения атрибута href в ранее созданную переменную. Далее значения атрибута href передаем в качестве параметра для функции slowScroll() прописанной в событие onclick с помощью конструкции menu_item[i].setAttribute('onclick', "slowScroll('" + attr_href + "')");.

И в конце удаляем значение атрибута href у ссылок, чтобы не происходил обычный переход.