如何在没有 jQuery 的情况下创建平滑的动画滚动到顶部？

在许多浏览器中动画滚动到顶部（jQuery 除外）

在 a 上实现平滑的动画“滚动到顶部”效果网页是一个常见的需求。然而，依赖外部 JavaScript 库（如 jQuery）可能是不可取的。本文介绍了一种无需额外框架即可创建此类动画的跨浏览器解决方案。

理解脚本

提供的代码涉及递归函数称为scrollTo，它接受三个参数：

1. element:滚动的目标元素（例如document.body）
2. to: 所需的滚动位置（例如，0 表示滚动到顶部）
3. duration: 动画的持续时间（以毫秒为单位）

该函数计算元素的当前滚动位置和所需的滚动位置，并每 10 毫秒应用一个小的增量来弥补间隙。这会创建逐渐平滑的滚动效果。

使用示例

要使用此解决方案，只需包含答案中提供的 JavaScript 代码片段并创建一个侦听器要用于启动滚动的元素上的单击事件。这是一个示例：

<code class="html"><button id="scrollme" type="button">To the top</button></code>

<code class="javascript">var scrollme;
scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false)

function runScroll() {
  scrollTo(document.body, 0, 600);
}</code>

以上是如何在没有 jQuery 的情况下创建平滑的动画滚动到顶部？的详细内容。更多信息请关注PHP中文网其他相关文章！