title: smooth scroll with mousewheel to next or previous div
body: <p>I'm trying to get a javascript on my site so when a person scrolls on the website, it automatically scrolls to the next or previous Div with a certain class. I'm working with smoothscroll and scrollto. I also found two codes that I'm trying to combine. But I don't seem to understand the whole scripts... </p>
  
  <p>The first script is from <a href="http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery" rel="nofollow noreferrer">http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery</a>. This script makes it possible to navigate between DIV's (with a certain class) by pressing next or previous.</p>
  
  <p>The second script is from <a href="https://stackoverflow.com/questions/5560714/how-to-enforce-a-smooth-scrolling-rule-for-mousewheel-jquery">How to enforce a &quot;smooth scrolling&quot; rule for mousewheel, jQuery?</a> (last post) and makes it possible to make the website scroll (smooth) down or up for a certain amount of pixels when scrolling.</p>
  
  <p>I wanted to combine these two but it's not really straight forward for me :/
  It would be nice if someone could point me how to do this. Thanks</p>
  
  <p>Best regards,</p>
  
  <p>Billy Beach</p>
  
  <hr>
  
  <p>Dear lalibi,</p>
  
  <p>Thanks for your answer. I tried your code, but don't seem to get it work. Here is the code I used:</p>
  
  <pre><code>&lt;head&gt;
  
  
  &lt;script type="text/javascript" src="Box/jquery.js"&gt;&lt;/script&gt;
  &lt;SCRIPT src="Box/jquery.min.js"&gt;&lt;/SCRIPT&gt;
  &lt;SCRIPT src="Box/jquery.scrollTo-1.4.2-min.js"&gt;&lt;/SCRIPT&gt;
  &lt;SCRIPT src="Box/jquery.localscroll-1.2.7-min.js"&gt;&lt;/SCRIPT&gt;
  &lt;script type="text/javascript" src="Box/jquery.mousewheel.min.js"&gt;&lt;/script&gt; 
  
  
  &lt;style type="text/css"&gt;
  &lt;!--
  
  div {
      border: 1px solid black;
      height: 50px;
  }
  
  div.current {
      background-color: orange;
  }
  
  --&gt;
  &lt;/style&gt;
  
  
  &lt;script type="text/javascript"&gt; 
  
  var current 
  
  $(function() {          
      $('body').mousewheel(function(event, delta) {
          var $current = $('div.current');
  
          console.log(delta);
          console.log($current);
  
          if (delta &gt; 0) {
              $prev = $current.prev();
  
              if ($prev.length) {
                  $('body').scrollTo($prev, 100);
                  $current.removeClass('current');
                  $prev.addClass('current');
              }
          } else {
              $next = $current.next();
  
              if ($next.length) {
                  $('body').scrollTo($next, 100);
                  $current.removeClass('current');
                  $next.addClass('current');
              }
          }
  
          event.preventDefault();
      });
  });
  
  &lt;/script&gt; 
  
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="current" id="div"&gt;1&lt;/div&gt;
  &lt;div id="div"&gt;2&lt;/div&gt;
  &lt;div id="div"&gt;3&lt;/div&gt;
  &lt;div id="div"&gt;4&lt;/div&gt;
  &lt;div id="div"&gt;5&lt;/div&gt;
  &lt;div id="div"&gt;6&lt;/div&gt;
  &lt;div id="div"&gt;7&lt;/div&gt;
  &lt;div id="div"&gt;8&lt;/div&gt;
  &lt;div id="div"&gt;9&lt;/div&gt;
  &lt;div id="div"&gt;10&lt;/div&gt;
  &lt;div id="div"&gt;11&lt;/div&gt;
  &lt;div id="div"&gt;12&lt;/div&gt;
  &lt;div id="div"&gt;13&lt;/div&gt;
  &lt;div id="div"&gt;14&lt;/div&gt;
  &lt;div id="div"&gt;15&lt;/div&gt;
  &lt;div id="div"&gt;16&lt;/div&gt;
  &lt;div id="div"&gt;17&lt;/div&gt;
  &lt;div id="div"&gt;18&lt;/div&gt;
  &lt;div id="div"&gt;19&lt;/div&gt;
  &lt;div id="div"&gt;20&lt;/div&gt;
  &lt;div id="div"&gt;21&lt;/div&gt;
  &lt;div id="div"&gt;22&lt;/div&gt;
  &lt;div id="div"&gt;23&lt;/div&gt;
  &lt;div id="div"&gt;24&lt;/div&gt;
  &lt;div id="div"&gt;25&lt;/div&gt;
  &lt;div id="div"&gt;26&lt;/div&gt;
  &lt;div class="current" id="div"&gt;27&lt;/div&gt;
  &lt;div id="div"&gt;28&lt;/div&gt;
  &lt;div id="div"&gt;29&lt;/div&gt;
  &lt;div id="div"&gt;30&lt;/div&gt;
  &lt;div id="div"&gt;31&lt;/div&gt;
  &lt;div id="div"&gt;32&lt;/div&gt;
  &lt;div id="div"&gt;33&lt;/div&gt;
  &lt;div id="div"&gt;34&lt;/div&gt;
  &lt;div id="div"&gt;35&lt;/div&gt;
  &lt;div id="div"&gt;36&lt;/div&gt;
  &lt;div id="div"&gt;37&lt;/div&gt;
  &lt;div id="div"&gt;38&lt;/div&gt;
  &lt;div id="div"&gt;39&lt;/div&gt;
  &lt;div id="div"&gt;40&lt;/div&gt;
  &lt;div id="div"&gt;41&lt;/div&gt;
  &lt;div id="div"&gt;42&lt;/div&gt;
  &lt;div id="div"&gt;43&lt;/div&gt;
  &lt;div id="div"&gt;44&lt;/div&gt;
  &lt;div id="div"&gt;45&lt;/div&gt;
  &lt;div id="div"&gt;46&lt;/div&gt;
  &lt;div id="div"&gt;47&lt;/div&gt;
  &lt;div id="div"&gt;48&lt;/div&gt;
  &lt;div id="div"&gt;49&lt;/div&gt;
  &lt;div id="div"&gt;50&lt;/div&gt;
  &lt;div id="div"&gt;51&lt;/div&gt;
  &lt;div id="div"&gt;52&lt;/div&gt;
  &lt;div id="div"&gt;53&lt;/div&gt;
  &lt;div id="div"&gt;54&lt;/div&gt;
  &lt;div id="div"&gt;55&lt;/div&gt;
  &lt;div id="div"&gt;56&lt;/div&gt;
  &lt;div class="current" id="div"&gt;57&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>