如何将整个可见页面向下滚动到具有平滑效果的锚点（Scriptaculous或jQuery）？

Question

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

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 .

Answer 2

请参阅： Effect.ScrollTo

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

Answer 3

I think maybe you could use this scroller: http://ruwix.com/simple-javascript-page-scroll-slider-jquery-scrollto-function-label-end It's the shortest I found so far and it's really simple. Unfortunately it scrolls a fix amount of pixels, not to a label but you could use its idea.