Materialize is a modern responsive CSS framework based on Material Design by Google.

Scrollspy tracks certain elements and which element the user's screen is currently centered on. Our main demo of this is our table of contents on every documentation page to the right. Clicking on these links will also scroll the page to that element.

<div class="row">
  <div class="col s12 m9 l10">
    <div id="introduction" class="section scrollspy">
    <div id="structure" class="section scrollspy">
    <div id="initialization" class="section scrollspy">
  <div class="col hide-on-small-only m3 l2">
    <ul class="section table-of-contents">
      <li><a href="#introduction">Introduction</a></li>
      <li><a href="#structure">Structure</a></li>
      <li><a href="#initialization">Initialization</a></li>



  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.scrollspy');
    var instances = M.ScrollSpy.init(elems, {
      // specify options here


Name Type Default Description
throttle Number 100 Throttle of scroll handler.
scrollOffset Number 200 Offset for centering element when scrolled to.
activeClass String 'active' Class applied to active elements.
getActiveElement Function Used to find active element.
This is the default function used for finding the active element where id is the id of the scrollspy element. It returns a CSS selector of the element you want marked active.

  function(id) {
    return 'a[href="#' + id + '"]';


All the methods are called on the plugin instance. You can get the plugin instance like this:

  var instance = M.ScrollSpy.getInstance(elem);

Destroy plugin instance and teardown



Name Type Description
el Element The DOM element the plugin was initialized with.
options Object The options the instance was initialized with.