Якорное меню для 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 у ссылок, чтобы не происходил обычный переход.

0 0 голос
Рейтинг статьи
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии