Page scroll introduction

To enable smooth scrolling to a section on the current page after clicking a menu item, include the "pageScroll" add-on .js file and use the pageScroll options.

<head>
   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.pagescroll.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.pagescroll.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu({
            pageScroll: {
               // pageScroll options
            }
         });
      });
   </script>

Example

Give it a go, change the options below and see how it affects the menu in the example on the right.

  • Enable smooth scrolling.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>

Options for the "pageScroll" add-on

Option Default value Datatype Description
pageScroll A map of options or true for pageScroll.scroll.
{
scroll false Boolean Whether or not to smoothly scroll to a section on the page after clicking a menu item.
update false Boolean 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 Default value Datatype Description
pageScroll
{
scrollOffset 0 Number The amount of pixels to scroll past the top of a section when scrolling.
updateOffset 50 Number 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.

SCSS variables for the "pageScroll" add-on

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

Dependencies:
  • Core (on-canvas + off-canvas).
Works great with:

Next add-on:
RTL