title: Auto Scroll to next div when user manually scroll between divs // jquery // bootstrap
body: <p>I created a website that consist of 5 sections horizontally, on a wide container of 500% width. I managed to successfully scroll horizontally between sections (divs) by using the following jquery:</p>
  
  <pre><code>$(function () {
      $("ul#nav a, ul.nav a").click(function (ev) {
          var anchor = $(this);
          $('html, body').stop().animate({
              scrollLeft: $($(anchor).attr('href')).offset().left
          }, 2500, 'easeOutBounce');
  
          // Add the section ID to the URL
          window.location.hash = $(anchor).attr('href').substring(1);
  
          ev.preventDefault();
          return false;
      });
  });
  </code></pre>
  
  <p>you see above I select the "ul#nav a" and go through the menu smoothly.</p>
  
  <p>Now the problem is that I have some space between each section, so when I manually scroll left or right, the view is not nice at all, I want the sections to always be centered, so I think I need a jquery function that force the view to scroll to the next section when the user manually scroll to left or right.</p>
  
  <p>HTML is something like this:</p>
  
  <pre><code>&lt;div id="OurWork" class="section row" align="center"&gt;
          &lt;div class="jumbotron whiteBack"&gt;
              &lt;h1&gt; Our Work &lt;/h1&gt;
          &lt;/div&gt;
            &lt;div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;"&gt;
  
              &lt;h4&gt;  Under Contruction &lt;/h4&gt;
  
  
          &lt;/div&gt;
  
            &lt;div class="col-sm-4 col-md-4 col-lg-4"&gt;
  
  
                 &lt;h4&gt;  Under Contruction &lt;/h4&gt;
  
              &lt;/div&gt;
  
            &lt;div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;"&gt;
                 &lt;h4&gt;  Under Contruction &lt;/h4&gt;
  
              &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div id="Technologies" class="section row" align="center"&gt;
           &lt;div class="jumbotron whiteBack"&gt;
              &lt;h1&gt; Technologies &lt;/h1&gt;
          &lt;/div&gt;
  
           &lt;div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;"&gt;
  
              &lt;h4&gt;  Under Contruction &lt;/h4&gt;
  
  
          &lt;/div&gt;
  
           &lt;div class="col-sm-4 col-md-4 col-lg-4"&gt;
  
  
                 &lt;h4&gt;  Under Contruction &lt;/h4&gt;
  
              &lt;/div&gt;
  
           &lt;div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;"&gt;
                 &lt;h4&gt;  Under Contruction &lt;/h4&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt; 
  </code></pre>
  
  <p>and the menu is like this:</p>
  
  <pre><code>&lt;div class="circular-menu"&gt;
                  &lt;div class="circle"&gt;
  
                     &lt;ul id="nav" class="cirular-list" &gt;
                              &lt;li&gt;&lt;a href="#Home"&gt;Home&lt;/a&gt;&lt;/li&gt;              
                              &lt;li&gt;&lt;a href="#OurWork"&gt;Our Work&lt;/a&gt;&lt;/li&gt;            
                              &lt;li&gt;&lt;a href="#Technologies"&gt;Technologies&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#ContactUs"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#AboutUs"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
  
                  &lt;/div&gt;
  
                      &lt;a href="" class="menu-button"&gt;&lt;img id="Img1" runat="server" src="Images/c1.jpg" /&gt;&lt;/a&gt;
  
                  &lt;/div&gt;
  </code></pre>
  
  <p>Also I found this awesome jquery function that solve my problem,but some how its only working on 2 divs instead of all divs, if you can tell me which part is responsible for the number of divs:</p>
  
  <pre><code>(function (b, c) { var $ = b.jQuery || b.Cowboy || (b.Cowboy = {}), a; $.throttle = a = function (e, f, j, i) { var h, d = 0; if (typeof f !== "boolean") { i = j; j = f; f = c } function g() { var o = this, m = +new Date() - d, n = arguments; function l() { d = +new Date(); j.apply(o, n) } function k() { h = c } if (i &amp;&amp; !h) { l() } h &amp;&amp; clearTimeout(h); if (i === c &amp;&amp; m &gt; e) { l() } else { if (f !== true) { h = setTimeout(i ? k : l, i === c ? e - m : e) } } } if ($.guid) { g.guid = j.guid = j.guid || $.guid++ } return g }; $.debounce = function (d, e, f) { return f === c ? a(d, e, false) : a(d, f, e !== false) } })(this);
  
  divs = [$("#Home"), $("#OurWork"), $("#Technologies"), $("#ContactUs"), $("#AboutUs")];
  
  var lastScrollTop = 0;
  var run = true;
  
  $(window).scroll($.debounce(250, true, function () {
  var st = $(window).scrollLeft();
  if (st &gt; lastScrollTop) {
      $.each(divs, function (i, v) {
          ((v.offset().left - $(window).scrollLeft()) &lt; 0) &amp;&amp; (next = i + 1);
      });
      run = (next != divs.length) ? true : false;
  } else {
      $.each(divs, function (i, v) {
          ((v.offset().left - $(window).scrollLeft()) &lt; 0) &amp;&amp; (next = i);
      });
      run = true;
  }
  if (run) {
      $('html, body').animate({
          scrollLeft: divs[next].offset().left
      }, 1000, 'easeOutBounce', function () {
          lastScrollTop = $(window).scrollLeft();
      });
  } else { lastScrollTop = $(window).scrollLeft(); }
  }));
  </code></pre>