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
{
updateOffset Number 50 The amount of pixels to scroll past the top of a section before its menu item will appear "selected".
}

API methods for the "pageScroll" add-on

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

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.

Next add-on:
Searchfield