title: How to use Mouse Wheel for jumping to next or previous # section in html
body: <p>I have a site with <strong>top nav menu</strong>:</p>
  
  <pre><code>&lt;nav id="menu"&gt;
      &lt;ul id="menu-nav"&gt;
          &lt;li class="current"&gt;&lt;a href="#home-slider"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#Cakes"&gt;Cakes&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#Candy"&gt;Candy&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#Marshmellow"&gt;Marshmellow&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#Honey"&gt;Honey&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
   &lt;/nav&gt;
  </code></pre>
  
  <p>And all my <strong>sections</strong> are:</p>
  
  <pre><code>&lt;div id="Cakes" class="page"&gt;
      &lt;div class="container"&gt;
          This is sweet
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I use the mouse wheel to jump directly to the next or previous section?</p>
  
  <p>Currently the mouse wheel will scroll the page like normal. But I want it to jump to every section with one wheel rotation without scrolling all the entire page.</p>