In order to create a smooth scroll anchor links functionality in wordpress we have to complete few steps. It's not very hard to achive this feature, even if you are begginer with wordpress it shouldn't be a problem to implement this menu in your website.

Smooth Scroll Anchor Links Wordpress No Plugin

First step is to understand how this script will work. First of all we will have to create the menu in Worpdress, if you already have the menu created you have to check few things before to procced to the next step. In order to make the menu, we have to check if there is any relationship between your menu items and your sections. Usually you have to add the section ID in the HREF attribute of the link or any other attribute. In jquery when we will create the on click function, we will check the attribute of the link, with this attribute we will know where is the section where we want to go.

Let's create the menu. Go in admin panel -> Appearance -> Menu. Create a new menu and all items of the page will be added as Custom Links.

• Label: Link 1 -> href: #section_1
• Label: Link 2 -> href: #section_2
• Label: Link 3 -> href: #section_3

In the href attribute we add the id of the sections where the button should scroll. Now, go to your main.js file and add the following code, make sure you add the code inside the document ready function.

jQuery('.my_menu a').on('click', function(e){
  e.preventDefault();
  var get_section = jQuery(this).attr('href'),
    section_offset = jQuery(get_section).offset().top;
  jQuery('body,html').animate({
    scrollTop: section_offset
  }, 1000);
});

This is all the code you need to make a smooth scrolling menu. Make sure you have jquery added in your website, if not, get the cdn from google and add it before the main.js file.