title: Parallax transition with subtle bounce between two anchors/divs
body: <p>I'm trying to have just one link on my website that links to the 'below-the-fold area' that I'll have a simple contact form at; the idea is to have that link do a nice transition similar to js parallax and once it reaches the below the fold area it kind of subtly 'bounces' a few pixels back up. (The space between anchors is about 800px)</p>
  
  <p>My attempts in the code below, but it's still just being read as an anchor-point without any transition. (Should I be loading a different jQuery library, or load them in a different order?)</p>
  
  <p><em><strong>Updated Attempt 12-16:</em></strong></p>
  
  <p><strong>Calling in the head</strong></p>
  
  <p><strong>Libraries being called:</strong></p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>Just About before closing head tag. (A few inline styles are right before closing <code>&lt;/head&gt;</code> if matters)</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $('a').on('click', function (event) {
          event.preventDefault();//stop the browser from jumping to the anchor
          var href  = $(this).attr('href'),
              oset  = $(href).offset().top;
          $('html, body').stop().animate({
              scrollTop : oset
          }, 700, function () {
              location.hash = href;
          });
      });
  
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>Mark-up, CTA divs</strong></p>
  
  <pre><code>&lt;div id="top" class="scrollpls"&gt;&lt;a href="#bottom"&gt;&lt;img src="http://www.mysite.com/imgs/down_btn.png" border="0" style="float:right; margin-top:200px;"&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p><em>..and near bottom of doc</em></p>
  
  <pre><code>   &lt;div id="bottom" class="scrollpls"&gt;&lt;a href="#top"&gt;
  &lt;img src="http://www.mysite.com/imgs/upsubway.png" style=" float: right;
      float: right;
      margin-right: -74px;
      margin-top: 700px;
  }"&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Hpegt/1/" rel="nofollow">http://jsfiddle.net/Hpegt/1/</a> </p>
  
  <p><strong>A fiddle created from an early Question regarding this function and states creating a style with the div height in it. Since declaring this for all divs as in the fiddle would break my layout, I tried it with a class</strong></p>
  
  <pre><code>.scrollpls {
      height : 500px;
      border :0px solid #000;
  }
  </code></pre>
  
  <p><strong>What am I doing wrong here?</strong> After I someday get this, I'll be trying to figure out how to implement an 'ease' with a subtle bounce back after it navs to the points.</p>
  
  <p>Thanks for any help</p>