如何在AMP中为返回顶部（Scroll-To-Top）功能添加平滑滚动效果

我看你已经实现了返回顶部按钮的显示/隐藏动画，现在只需要给按钮加上平滑滚动到顶部的触发逻辑就行，下面是修改后的完整代码和关键说明：

完整修改后的代码 #

<!-- 顶部锚点与显示/隐藏触发器 -->
<h3 class="target">
  <a class="target-anchor" id="top"></a>
  <amp-position-observer 
    on="enter:hideAnim.start; exit:showAnim.start" 
    layout="nodisplay">
  </amp-position-observer>
</h3>

<!-- 返回顶部按钮（新增平滑滚动触发事件） -->
<button id="scrollToTopButton" on="tap:top.scrollTo(duration=800)">
  返回顶部
</button>

<!-- 按钮显示动画 -->
<amp-animation id="showAnim" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "1000ms",
      "fill": "both",
      "iterations": "1",
      "animations": [
        {
          "selector": "#scrollToTopButton",
          "keyframes": [
            {"opacity": "1", "visibility": "visible"}
          ]
        }
      ]
    }
  </script>
</amp-animation>

<!-- 按钮隐藏动画 -->
<amp-animation id="hideAnim" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "1000ms",
      "fill": "both",
      "iterations": "1",
      "animations": [
        {
          "selector": "#scrollToTopButton",
          "keyframes": [
            {"opacity": "0", "visibility": "hidden"}
          ]
        }
      ]
    }
  </script>
</amp-animation>

关键修改点说明 #

• 添加平滑滚动触发：在返回顶部按钮上新增了on="tap:top.scrollTo(duration=800)"，这里的top对应你设置的锚点ID，duration=800表示滚动动画持续800毫秒，你可以根据需求调整这个数值（比如500ms更快，1000ms更平缓）。
• 优化动画配置：移除了原代码中的direction: "alternate"，因为显示/隐藏动画只需要单次执行，这个配置会导致重复触发时出现反向播放的异常，去掉后动画逻辑更稳定。

进阶：自定义滚动缓动效果 #

如果你想要更细腻的滚动体验（比如先快后慢的缓动效果），可以用amp-animation专门控制滚动行为，代码如下：

新增滚动动画 #

<amp-animation id="scrollToTopAnim" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "800ms",
      "fill": "both",
      "iterations": "1",
      "animations": [
        {
          "selector": "body, html",
          "keyframes": [{"scrollTop": "0"}],
          "easing": "ease-in-out"
        }
      ]
    }
  </script>
</amp-animation>

修改按钮触发事件 #

把按钮的on属性改成：

<button id="scrollToTopButton" on="tap:scrollToTopAnim.start">
  返回顶部
</button>

这样就能通过easing参数自定义滚动的节奏，ease-in-out是比较自然的选择，你也可以尝试ease-out、cubic-bezier(0.42, 0, 0.58, 1)等其他缓动函数。

内容的提问来源于stack exchange，提问作者Pradeep Kumar