Page scroll introduction

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( "#my-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.

  • Enable smooth scrolling.
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Note: For some reason, this example is sometimes a bit buggy in the iPhone-iframe. Open it in a new window for better results.

Options for the "pageScroll" add-on

Option Datatype Default value Description
pageScroll A map of options or true for pageScroll.scroll.
{
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.

SCSS variables for the "pageScroll" add-on

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

API methods for the "pageScroll" add-on

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

Next add-on:
Searchfield