scrollfy

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/jquery-scrollify@1/jquery.scrollify.min.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <section id="header" class="example-classname" data-section-name="header"><h1>Header</h1></section>
    <div class="inner-wrapper">
      <section id="about" class="example-classname" data-section-name="about"><h1>About</h1></section>
    </div>
    <section id="footer" class="example-classname" data-section-name="footer"><h1>Footer</h1></section>
    <script src="script.js"></script>
  </body>
</html>

// Code goes here

if (!(/Android|webOS|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i.test(navigator.userAgent) )) 
{ 
  $.scrollify({
    section: ".example-classname",
    sectionName: "section-name",
    interstitialSection: "",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset: 0,
    scrollbars: true,
    standardScrollElements: "",
    setHeights: true,
    overflowScroll: true,
    updateHash: true,
    touchScroll: true
  });
}


section { 
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
section#header {
  background: lightblue;
}
section#about {
  background: lightpink;
}
section#footer {
  background: lightgreen;
  height: 80vh!important;
}