Parallax transition with a thin bounce between two anchors / divs

Question

I am trying to have only one link on my website that links to the "bottom area" on which I will have a simple contact form; the idea is for this link to make a nice transition, similar to js parallax, and as soon as it reaches below the fold area, it seems to subtly “bounce” from a few pixels. (The space between the anchors is about 800 pixels)

My attempts are in the code below, but it still just reads as a reference point without any transition. (Should I load another jQuery library or load them in a different order?)

Updated attempt 12-16:

A challenge to the head

Libraries called:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> 

Just before closing the title tag. (Several inline styles are right before closing </head> , if that matters)

 <script type="text/javascript"> $('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; }); }); </script> 

Markup, CTA divs

 <div id="top" class="scrollpls"><a href="#bottom"><img src="http://www.mysite.com/imgs/down_btn.png" border="0" style="float:right; margin-top:200px;"></a></div> 

.. and near the bottom of the document

  <div id="bottom" class="scrollpls"><a href="#top"> <img src="http://www.mysite.com/imgs/upsubway.png" style=" float: right; float: right; margin-right: -74px; margin-top: 700px; }"></a></div> 

http://jsfiddle.net/Hpegt/1/

The script is created from an early Question regarding this function and claims to create a style with a div height in it. Since declaring this for all divs, like in a fiddle, will break my layout, I tried it with a class

 .scrollpls { height : 500px; border :0px solid #000; } 

What am I doing wrong here? After I get it someday, I’ll try to figure out how to realize the “lightness” with subtle return after it brings the dots.

Thanks for any help

Answer 1

There are tons of built-in softening effects if you included jQueryUI .

Try this modification for your violin - http://jsfiddle.net/CzQXC/

 $('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 }, 1000, 'easeInOutElastic', function () { location.hash = href; } ); }); 

Answer 2

Try the following:

 <script type="text/javascript"> $(function() { // this should really be in a click handler, but just for an example: $('html,body').animate({ scrollTop: $("#testtop").offset().top }, 2000, 'bounce'); }); </script> 

Note: the bounce parameter indicates ease of use. This is part of jQueryUI , so you need to download it and enable it on your page for the effect to work correctly.

Answer 3

For some reason, it took several minutes to work after entering the code, but finally it resolved, and I think it was a solution:

 #top, #bottom { height : 130px; border : 0px solid #000; overflow:hidden; }