Open the menu Skip to main content

Page scroll

To enable smooth scrolling to a section on the current page after clicking a menu item, use the pageScroll options and configuration.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#menu", {
                pageScroll: {
                    // page scroll options
                }
            }, {
                pageScroll: {
                    // page scroll configuration
                }
            });
        }
    );
</script>

Example

Give it a go, change the options below and see how it affects the menu.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Options for the "pageScroll" add-on

Option Datatype Default value Description
pageScroll
{
scroll boolean false Whether or not to smoothly scroll to a section on the page after clicking a menu item.
update boolean false Whether or not to automatically make a menu item appear "selected" when scrolling through the section it is linked to.
}

Configuration for the "pageScroll" add-on

Option Datatype Default value Description
pageScroll
{
scrollOffset Number 0 The amount of pixels to scroll past the top of a section after clicking a menu item.
updateOffset Number 50 The amount of pixels to scroll past the top of a section before its menu item will appear "selected".
}

CSS variables for the "pageScroll" add-on

The "pageScroll" add-on has no CSS variables.

API methods for the "pageScroll" add-on

The "pageScroll" add-on has no API methods.