Scroll To

Knowledgebase Docs » UberMenu 3
UberMenu 3

Setting the scroll target

Each UberMenu menu item has a setting to define a “scroll to” element – when the menu item is clicked, the relevant element will be scrolled into view.

Valid values for this setting are IDs or classes – for example #special-content or .user-info. Values must be valid jQuery selectors to function.

When the menu item is clicked, if there is a matching element on the page, the menu will scroll the site to that element.

If the element does not exist on the current page, the site will redirect to the URL of that menu item link. On the redirected page, UberMenu will attempt to locate and immediately scroll to any matching element on that page.

As an example, let’s say you have a contact form element with the ID #contact on your /about page. You add a link to your About page to UberMenu, and set the ScrollTo value to #contact.

If you are on the About page and click the link in the menu, the page will scroll to the Contact Form.

If you are any other page, like the home page, and click the link in the menu, the site will redirect to the About page, then scroll to the Contact Form.

Configuring the scroll function

The specifics of the scroll can be configured in the UberMenu Control Panel > General Settings > Script Configuration

The ScrollTo Offset defines the gap that will be left at the top of the screen and the selected element when scrolling, to the element doesn’t abut the viewport.

The ScrollTo Duration setting defines the amount of time the scroll animation will take to complete, and therefore the speed of the transition.

The Collapse Menu after Scroll To setting affects the mobile menu – when a ScrollTo item is clicked, the responsive menu will toggle shut after the page is scrolled.