javascript - 平滑滚动到页面顶部

Question

作为 JavaScript/JQuery 的新手，我已经花了好几个小时做这件事，但我仍然不知道如何执行以下操作:

我在页面的页脚中有一个“返回顶部” anchor 链接，它链接到页眉。我知道有 CSS 代码可以使滚动(缓慢)移动平滑:

html {
  scroll-behavior: smooth;
}

但这在 Safari 中不起作用。

在 CSS Tricks 网站 ( https://css-tricks.com/snippets/jquery/smooth-scrolling/ ) 上，它说有一个 JavaScript 可以替代上述 CSS:

window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth'
});

但是如何或在哪里将其添加到我的链接/页面？我想我会想要 top: 0,

我的 HTML 是这样的:

<header id="top">.... </header>

<footer>
<a href="#top"><img class="to-top" src="resources/arrow.svg"></a>
</footer>

更新我试过以下方法，但它不起作用。有什么想法吗？

<footer>
    <a href="#top" onclick="window.scroll({ top: 0, behavior: 'smooth' })"><img class="to-top" src="resources/arrow.svg"></a>
</footer>

Answer 1

使用 onclick-Event :

<header id="top">....</header>
<div style="background-color: red; height: 1200px"></div>
<footer>
  <a style="cursor:pointer;" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })"><img class="to-top" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Feather-arrows-arrow-up.svg/24px-Feather-arrows-arrow-up.svg.png"></a>
</footer>