How to scroll whole visible page down to an anchor with a smooth effect (Scriptaculous or jQuery)?

Question

Hey community,

I want to create an navigation with anchors. By clicking on a navigation link, the whole visible page should scroll down to the clicked anchor.

The most important is the following structure of the page.

--------------- (Begin visible browser area)
NAV1 nav2 nav3

content
--------------- (Begin/end visible browser area)
nav1 NAV2 nav3

content
--------------- (Begin/end visible browser area)
nav1 nav2 NAV3

content
--------------- (end visible browser area)

Finally all content is in a single document and the height of the current page (selected by the nav-item) has to be calculated (with a JS Library). I prefer PrototypeJS/Scriptaculous and jQuery.

The scroll effect should be a smooth slide/ effect.

Chris

Answer 1

See: Effect.ScrollTo

<a href="javascript:// scroll" onclick="Effect.ScrollTo('element_id', { duration:'.5'})" />link</a>

Answer 2

If you want a jQuery solution, use ScrollTo, and if all you need is anchor-based animations implement the associated LocalScroll plugin.

If you want the content panes to take up the entire visible browser area, you can set that dynamically at page load (and on browser resize) with jQuery as well. There's a great explanation of the "height" method here.