Anchor Menu Bar

parkwestsolutions

Hi guys, i'm trying to setup Buttonizer to work as an anchor menu bar for roughly 10 menu categories, any suggestions?

Jasper

Hope you've had a great weekend 🙂

This sounds like something that should be do-able! How far are you right now with setting it up? If you can share your site, we can take a look for you.

Let me know, then we'll guide you 😎

Cheers,
Jasper

parkwestsolutions

Not far with setting up, haven't been able to figure it out.

Heres the link: https://junmaisushibar.com/our-menu/. As you can see, there is quite a bit of products and categories. This is the page id like the floating menu to reflect the anchor feature, preventing customers from constant scrolling to find the area of interest.

Jasper

parkwestsolutions Thanks for the extra info!

Currently we do not have the button-action yet, but we have it on our sprint planning already. So this will be a feature that will be released within a few weeks.

What you can do now is using the Custom JavaScript button action to archeive this. The code could look like this:

const scrollTo = (elementId) => {
    jQuery('html, body').animate({
        scrollTop: jQuery(elementId).offset().top
    }, 2000);
}

window.addEventListener("buttonizer_button_clicked", event => {
  if(event.detail.button_id === "YOUR-BUTTON-ID-HERE") {
      scrollTo("#lunch-specials");
  }
  else if (event.detail.button_id === "YOUR-BUTTON-ID-HERE") {
      scrollTo("#sides");
  }
  else if (event.detail.button_id === "YOUR-BUTTON-ID-HERE") {
      scrollTo("#specialities");
  }
  else if (event.detail.button_id === "YOUR-BUTTON-ID-HERE") {
      scrollTo("#nigiri-sashimi");
  }
  else if (event.detail.button_id === "YOUR-BUTTON-ID-HERE") {
      scrollTo("#hand-rolls");
  }
  // Etc...
});

You can find the button ID in the Custom JavaScript Button action. Make that all the element IDs are present on your webpage, otherwise the anchors will not work of course.

Let me know if this works and helps 🙂