How can I use 'scroll spy' without bootstrap?

I use MDL and I want to make 'scrollspy' or ' smooth scroll'.

How can I use scrollspy??

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

  <header class="mdl-layout__header mdl-layout__header--waterfall whiteBack">
    <div class="mdl-layout__header-row">

      <nav class="mdl-navigation">
        <a href="#about" class="mdl-navigation__link">About</a>
        <a href="#service" class="mdl-navigation__link">Service</a>
        <a href="#app" class="mdl-navigation__link">App</a>
        <a href="#team" class="mdl-navigation__link">Team</a>
      </nav>

    </div>
  </header>
</div>

This is my fixed navigation bar.