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

【问题标题】：How to scroll whole visible page down to an anchor with a smooth effect (Scriptaculous or jQuery)?如何将整个可见页面向下滚动到具有平滑效果（Scriptaculous 或 jQuery）的锚点？
【发布时间】：2010-05-13 15:30:35
【问题描述】：

我想创建一个带有锚点的导航。通过单击导航链接，整个可见页面应向下滚动到单击的锚点。

最重要的是页面的如下结构。

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

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

克里斯

【问题讨论】：

您希望导航保持在固定位置，并且只滚动内容吗？还是你重复导航三遍？
我在想同样的事情，但更合乎逻辑的是重复导航。重复:)
jquery smooth scroll to an anchor? 的可能重复项

标签： javascript jquery html css scriptaculous

【解决方案1】：

如果您想要一个 jQuery 解决方案，请使用ScrollTo，如果您只需要基于锚的动画，请实现相关的 LocalScroll 插件。

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

【讨论】：

【解决方案2】：

见：Effect.ScrollTo

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

【讨论】：

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

【解决方案3】：

我想也许你可以使用这个滚动条：http://ruwix.com/simple-javascript-page-scroll-slider-jquery-scrollto-function-label-end 这是迄今为止我发现的最短的，而且非常简单。不幸的是，它滚动了固定数量的像素，而不是标签，但你可以使用它的想法。

【讨论】：