带有锚定到另一个页面和 ID 的菜单不起作用

Question

i'm facing this strange problem for the first time. Probably is something really easy but i can't get out.

If you open the menu in this page: https://danielepinazzi.com/fabric/

and you try to navigate into that page with anchor link, it works perfectly.

If you open the "contact us" page and then try to click on another link in the menu, like "what we do" it will close the menu and do nothing. But if you try to right click and select "open in a new tab", it work.

Edit because i need to explain better: I've already added the absolute link in the menu, not only the anchor. The section #whatwedo is linked with https://danielepinazzi.com/fabric/#whatwedo

I'm using Chrome on a Mac.

Can someone explain this to me?

Thank you and have a nice day you all.

Answer 1

You have probably added anchor links via the menu like #link . Those links only work if you are on the page where these anchors are placed. If you want them to work when you are on another page, you should add them as /fabric/#link since the homepage for your project is /fabric/ .

Note: it is easiest if you use absolute URL's in your menu (ie https://danielepinazzi.com/fabric/#whatwedo instead of just #whatwedo . Don't forget to update those if you migrate to a production environment.

Answer 2

I inspected whats going on there, you have a code block as mentioned below;

When i do what you said on the problem, isSamePage returns true because you are splitting anchor tag on href variable

$this.attr("href").split("#")[0]

and it returns https://danielepinazzi.com/fabric/ which is already in url.

That makes isSamePage true according the code and prevents the action.

    $(".mk-fullscreen-nav-close, .mk-fullscreen-nav-wrapper, #fullscreen-navigation a").on("click", function(e) {
        $(".mk-fullscreen-nav").removeClass("opened"),
        $(".mk-dashboard-trigger").removeClass("fullscreen-active"),
        $("body").removeClass("fullscreen-nav-opened");
        var anchor = MK.utils.detectAnchor(this)
          , $this = $(this)
          , href = $this.attr("href").split("#")[0]
          , url = window.location.href
          , isSamePage = -1 !== url.indexOf(href);
        anchor.length ? (isSamePage && e.preventDefault(),
        MK.utils.scrollToAnchor(anchor)) : "#" === $this.attr("href") && e.preventDefault()
    })