0

在 javascript 方面，我完全是新手，因此我正在寻求您的帮助。

我的标记是这样的：

<body >

<div class="header_link">

<h1 style="clear:both; padding:5px;">Smooth Scroll by Dezinerfolio</h1>

<a name="top" href="#footer">GO TO FOOTER</a>
<a href="#middle">GO TO MIDDLE</a>

  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec diam  magna, consequat non, adipiscing quis, congue a, mauris. Duis convallis  leo quis metus. </p>
</div>


<div class="middle_link">

<a name="middle" href="#top">GO TO TOP</a>
<a href="#footer">GO TO FOOTER</a>

  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec diam  magna, consequat non, adipiscing quis, congue a, mauris. Duis convallis  leo quis metus. </p>
</div>

<div class="footer_link">

<a name="footer" href="#top">GO TO HEADER</a>
<a href="#middle">GO TO MIDDLE</a>

  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec diam  magna, consequat non, adipiscing quis, congue a, mauris. Duis convallis  leo quis metus. </p>
</div>

</body>

我想要的是当访问者点击那个特定的按钮时，页面应该平滑/缓慢地滚动到那个特定div的 .

我知道 jQuery 和 MooTools 中有很多插件，但我不想使用它们，因为这是我网站中唯一需要的 javascript 函数，其余的都是纯 CSS 活动。因此，没有必要加载整个 60 到 100 KB 的 JavaScript 库（jQuery 或 MooTools）来实现这个小功能。我正在寻找一个简单的纯 JavaScript 函数

请帮忙！

4

2 回答 2

3

你可以看看 jQuery 源代码，看看他们是怎么做的。

或者，谷歌告诉我这些页面看起来很有希望：

于 2012-04-22T05:39:54.400 回答
0

“我正在寻找一个简单的纯 JavaScript 函数”

这个问题没有简单的纯 Javascript 解决方案。Javascript 确实提供了“scrollTo”功能，但它会立即滚动，而不是平滑或缓慢滚动。

如果你需要支持广泛的浏览器，你应该使用 jQuery。像这样的动画就是 jQuery 的用途，很多人都付出了很多努力来确保 jQuery 的这个特性易于使用并且性能良好。自己复制此功能并不能很好地利用您的时间。

您可以使用 CSS3 转换轻松地做到这一点，但 IE（目前）不支持这些转换。如果您不关心 IE，这也是一个很好的解决方案。

于 2012-04-22T06:41:22.733 回答