如何將整個可見頁面向下滾動到具有平滑效果的錨點（Scriptaculous或jQuery）？

Question

我想用錨點創建導航。 通過單擊導航鏈接，整個可見頁面應向下滾動到單擊的錨點。

最重要的是頁面的以下結構。

--------------- (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)

最后，所有內容都在一個文檔中，並且必須計算當前頁面的高度（由nav-item選擇）（使用JS庫）。 我更喜歡PrototypeJS / Scriptaculous和jQuery。

滾動效果應該是平滑的幻燈片/效果。

克里斯

Answer 1

如果你想要一個jQuery解決方案，使用ScrollTo ，如果你需要的只是基於錨的動畫實現相關的LocalScroll插件。

如果您希望內容窗格占據整個可見瀏覽器區域，您可以使用jQuery在頁面加載（以及瀏覽器調整大小）上動態設置。 還有的“高度”的方法很好的解釋在這里 。

Answer 2

請參閱： Effect.ScrollTo

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

Answer 3

我想也許你可以使用這個卷軸： http ： //ruwix.com/simple-javascript-page-scroll-slider-jquery-scrollto-function-label-end這是我迄今為止發現的最短的，它非常簡單。 不幸的是，它滾動固定數量的像素，而不是標簽，但你可以使用它的想法。