3

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

ChrisBenyamin
  • 1,718
  • 4
  • 22
  • 39
  • Do you want the nav to stay in a fixed position and only the content to scroll? Or are you repeating the nav three times? – Andrew May 13 '10 at 15:49
  • I was thinking about the same thing, but more logical is to repeat the navigation. Repeat :) – ChrisBenyamin May 13 '10 at 15:51
  • possible duplicate of [jquery smooth scroll to an anchor?](http://stackoverflow.com/questions/4198041/jquery-smooth-scroll-to-an-anchor) – hanoo Feb 21 '15 at 03:28

3 Answers3

3

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.

Andrew
  • 1,187
  • 7
  • 8
1

See: Effect.ScrollTo

<a href="javascript:// scroll" onclick="Effect.ScrollTo('element_id', { duration:'.5'})" />link</a>
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • I think you have to read my question again. Its not only the anchor-to-anchor-scroll-effect included in my topic/question. Another important thing is that your scroll-to-anchor has to be set "dynamically", because the next page has to begin in the not visible area of your browser (see the sketch in my post). – ChrisBenyamin May 13 '10 at 15:41
0

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.

Frickomesz
  • 1