index.html

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Scroll to Element Class</title>
    <meta name="description" content="Scroll window to DOM element with smooth animation"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Merriweather:700"/>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
  </head>
  <body class="page">
    <div class="site-container">
      <header class="header">
        <div class="wrap">
          <h2 class="logo">Scroll Window to Element</h2>
          <nav class="nav">
            <ul>
              <li><a href="#section-1">section-1</a></li>
              <li><a href="#section-2">section-2</a></li>
              <li><a href="#section-3">section-3</a></li>
              <li><a href="#section-4">section-4</a></li>
              <li><a href="#section-5">section-5</a></li>
            </ul>
          </nav>
        </div>
      </header>
      <div class="content">
        <div class="section" data-section="section-1">
          <h3 class="section__title">Section 1</h3>
        </div>
        <div class="section" data-section="section-2">
          <h3 class="section__title">Section 2</h3>
        </div>
        <div class="section" data-section="section-3">
          <h3 class="section__title">Section 3</h3>
        </div>
        <div class="section" data-section="section-4">
          <h3 class="section__title">Section 4</h3>
        </div>
        <div class="section" data-section="section-5">
          <h3 class="section__title">Section 5</h3>
        </div>
      </div>
    </div>
    <script src="js/bundle.js"></script>
  </body>
</html>