如何使用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)

最终所有内容都在一个单一的文档中，需要计算当前页面（由导航项选择）的高度（使用JS库）。我更喜欢PrototypeJS/Scriptaculous和jQuery。

滚动效果应该是平滑的滑动/效果。

Chris

- ChrisBenyamin

---

你想要导航保持固定位置，只有内容滚动吗？还是你要重复三次导航？ - Andrew

我也在思考同样的问题，但更合理的做法是重复导航。重复 :) - ChrisBenyamin

可能是重复的问题：jquery如何平滑滚动到锚点？ - hanoo

Answer 1

如果你想使用jQuery解决方案，请使用ScrollTo，如果你只需要基于锚点的动画，则可以实现相关的LocalScroll插件。

如果你希望内容窗格占据整个可见浏览器区域，你也可以使用jQuery在页面加载时（以及浏览器调整大小时）动态设置。这里有一个很好的“height”方法的解释here。

- Andrew

Answer 2

参见：Effect.ScrollTo

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

- Diodeus - James MacFarlane

---

我认为你需要再读一遍我的问题。 我的话题/问题中不仅包含了锚点滚动效果。另一个重要的事情是，你的滚动到锚点必须被“动态”设置，因为下一页必须从浏览器的不可见区域开始（请参见我帖子中的草图）。 - ChrisBenyamin

Answer 3

我认为你可以使用这个滚动条：http://ruwix.com/simple-javascript-page-scroll-slider-jquery-scrollto-function-label-end 这是我目前找到的最短和最简单的。不幸的是，它只能滚动固定数量的像素，而不能滚动到标签处，但你可以借鉴它的思路。

- Frickomesz