Menu option with anchor that is on the same page

Give your menu items the class .scrollink, make sure the anchors have ID’s

add this to your theme’s JS

    $( "a.scrollLink" ).click(function( event ) {
        event.preventDefault();
        $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top -100 }, 500);
    });

Hi! Thanks for your response.

I already have something like that, the problem is that this only works when you are browsing the page that has that ID, am I right?

For example: I have a menu option that is Coffe, which is a section inside the Products page, with its corresponding ID. If I click on that menu option, the code above will only work if I’m already in the Products page, otherwise, there will be an error because it cannot find the ID for that section, right?

I already have the smooth scroll and the anchor menus working fine, but I’m using full URLs in these menu options (like https://www.mypage.com/products#coffee), because I have more pages (like Contact page, so I need to use full URLs, not just the anchor, like you would do if you have a onepage website), so every time I click on them it’s loading the page, then scrolling to the anchor.
What I want to achieve is to avoid the reload of the page when I’m in the Products page, I just want to scroll to that section. I don’t know if this is possible…

Thanks again!

Correct, take a look at this article. It may point you in the right direction: https://www.wpbeginner.com/plugins/how-to-add-conditional-logic-to-menus-in-wordpress/

This looks really good, I think I could use to solve my situation. Thank you so much for the information and taking the time to answer me, I really appreciate it.

Cheer!