Menu Item Settings > General > Scroll To
How to implement smooth scrolling to in-page elements
If you would like to create a menu item link that points to a specific element in the page, you can set that up using the Scroll To functionality.
For example, if you have multiple sections on a page, you can link to an individual section and have that appear in the viewport when the link is clicked.
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
Offset
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.
Duration
The ScrollTo Duration setting defines the amount of time the scroll animation will take to complete, and therefore the speed of the transition.
Collapse Menu
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.