title: scroll a full page height up or down with jQuery/Javascript
body: <p>I'm currently working on a site which requires something similar to this in terms of scrolling functionality: <a href="http://www.apple.com/iphone-5s/" rel="nofollow noreferrer">http://www.apple.com/iphone-5s/</a></p>
  <p>I've look through the site's (apple's) code and of course, as I should have suspected, came up empty.
  I'm looking for a way to have full-page divs (with background images) that can be scrolled through, and the scrolling to the next div happens on a single up/down scroll by the mouse.</p>
  <p>I've handled the dynamic full-page divs, I almost even had the scrolling functionality down but it's just not working how I expected and I've already spent a couple of days on this.</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;splashPage mainDiv&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;containerHomes&quot; class=&quot;mainDiv homesPosition&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.homesPosition {
      top: 100%;
  }
  
  .splashPage {
      background: black;
      z-index: -200;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }
  #containerHomes {
      z-index: -200;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      background:url(../img/background-placeholder.jpg) no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;    
  }
  </code></pre>
  <p>Jquery:</p>
  <pre><code>&lt;!-- Keep the div at max page height and width --&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  var height = $(window).height();
  var width = $(window).width();
  $(function() {
      $(window).resize(function() {
          $(&quot;.mainDiv&quot;).height(height);
          $(&quot;.mainDiv&quot;).width(width);
          $(&quot;#sidebar&quot;).height(height);
      var height = $(window).height();
      var width = $(window).width();
      });
  });
  &lt;/script&gt;
  
  &lt;!-- Scroll up and down detection/movement --&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
      $(window).bind('mousewheel', function(event) {
          if (event.originalEvent.wheelDelta &gt;= 0) {
              $(window).scrollTo('0%', 1000);
          }
          else {
              $(window).scrollTo('100%', 1000);
          }
          event.preventDefault()
      });
  &lt;/script&gt;
  </code></pre>
  <p>I'm using the scrollTo plugin by Flesler (still don't actually have the rep to post more than 2 links)</p>
  <p>Which is working fine, but I've yet to find a way to have a full-proof way of scrolling up and down the way I want it. Using what I have up there, if you (like a lot of users) spam the scroll wheel to go up/down I'm pretty sure the wheelDelta count gets messed up and it won't be able to operate properly.</p>
  <p>I've tried practically every link on the first 10 pages on google relating to scrolling up and down as functions, as well as most of the questions on S.O. that are relative.</p>
  <p>My main goal is the scroll functionality.</p>