Question

对于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函数

请帮忙！

Answer 1

您可以查看jQuery源代码，看看他们是如何做到的。

或者，Google告诉我这些看起来很有前途的网页：

Answer 2

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

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

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

可以使用CSS3过渡轻松完成此操作，但IE中尚未支持这些过滤。如果你不关心IE，这也是一个很好的解决方案。

用于在点击时滚动到div ID的Javascript

2 个答案: