title: jQuery Animating Elements by Scrolling the page
body: <p>I'm trying to create a animation by scrolling the page, something like this:</p>
  
  <pre><code>$(function() {
  $(document).on('scroll', function() {
      var top = $(document).scrollTop();      
      if (top &gt; 2200 &amp;&amp; top &lt; 2401) {
          if (top &gt; 2200 &amp;&amp; top &lt; 2210) {
              $('#seta2').stop().animate({left: "826px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2211 &amp;&amp; top &lt; 2220) {
              $('#seta2').stop().animate({left: "821px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2221 &amp;&amp; top &lt; 2230) {
              $('#seta2').stop().animate({left: "816px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2231 &amp;&amp; top &lt; 2240) {
              $('#seta2').stop().animate({left: "811px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2241 &amp;&amp; top &lt; 2250) {
              $('#seta2').stop().animate({left: "806px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2251 &amp;&amp; top &lt; 2260) {
              $('#seta2').stop().animate({left: "801px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2261 &amp;&amp; top &lt; 2270) {
              $('#seta2').stop().animate({left: "796px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2271 &amp;&amp; top &lt; 2280) {
              $('#seta2').stop().animate({left: "791px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2281 &amp;&amp; top &lt; 2290) {
              $('#seta2').stop().animate({left: "786px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2291 &amp;&amp; top &lt; 2300) {
              $('#seta2').stop().animate({left: "781px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2301 &amp;&amp; top &lt; 2310) {
              $('#seta2').stop().animate({left: "776px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2311 &amp;&amp; top &lt; 2320) {
              $('#seta2').stop().animate({left: "771px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2321 &amp;&amp; top &lt; 2330) {
              $('#seta2').stop().animate({left: "766px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2331 &amp;&amp; top &lt; 2340) {
              $('#seta2').stop().animate({left: "761px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2341 &amp;&amp; top &lt; 2350) {
              $('#seta2').stop().animate({left: "756px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2351 &amp;&amp; top &lt; 2360) {
              $('#seta2').stop().animate({left: "751px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2361 &amp;&amp; top &lt; 2370) {
              $('#seta2').stop().animate({left: "746px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2371 &amp;&amp; top &lt; 2380) {
              $('#seta2').stop().animate({left: "741px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2381 &amp;&amp; top &lt; 2390) {
              $('#seta2').stop().animate({left: "736px"}, 300, "easeOutQuad" );
          }
          if (top &gt; 2391 &amp;&amp; top &lt; 2400) {
              $('#seta2').stop().animate({left: "731px"}, 300, "easeOutQuad" );
          }
      }
      else {
          $('#seta2').stop().animate({left: "830px"}, 300, "easeOutQuad" );
      }
  });});
  </code></pre>
  
  <p>But, this code is too long, about 70 lines for a 200px scroll height, is there a better option for doing this?</p>
  
  <p>Again, sorry for the bad english... And thanks a lot for paying attention</p>