AMP网站无JavaScript实现：页面加载跳转指定区块及顶部横幅滚动显示

嘿，这两个AMP场景的需求完全不用碰一行自定义JS，全靠AMP的原生组件和浏览器原生行为就能搞定，我给你拆解具体方案：

AMP完全支持浏览器的原生锚点跳转机制，不需要任何JS触发：

• 第一步：给你想要跳转的目标区块添加一个唯一的id属性，比如：

  <div id="target-section" class="content-block">
    <!-- 这里是目标区块的内容 -->
  </div>
  

• 第二步：如果是从外部链接进入页面，直接在URL末尾加上#target-section，页面加载完成后会自动滚动到这个ID对应的区块；如果是同页面加载时触发跳转，只需要确保页面的初始访问URL带有这个锚点即可——浏览器会自动处理滚动逻辑，AMP不会阻止这个原生行为。

这个需求可以用AMP官方提供的amp-position-observer（监听页面位置变化）和amp-animation（实现过渡动画）组件来完成，全程不需要自定义JS：

第一步：引入必要的AMP组件脚本 #

在页面的<head>标签里添加这两个组件的脚本：

<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

第二步：定义显示/隐藏横幅的动画 #

在页面中添加两个amp-animation组件，分别控制横幅的显示和隐藏：

<!-- 显示横幅的动画 -->
<amp-animation id="showBanner" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "0.3s",
      "fill": "both",
      "animations": [
        {
          "selector": "#top-banner",
          "keyframes": [{"transform": "translateY(0)"}]
        }
      ]
    }
  </script>
</amp-animation>

<!-- 隐藏横幅的动画 -->
<amp-animation id="hideBanner" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "0.3s",
      "fill": "both",
      "animations": [
        {
          "selector": "#top-banner",
          "keyframes": [{"transform": "translateY(-100%)"}]
        }
      ]
    }
  </script>
</amp-animation>

第三步：添加顶部横幅和滚动监听组件 #

<!-- 顶部横幅：默认通过transform隐藏在视口外 -->
<div id="top-banner" style="position: fixed; top: 0; left: 0; right: 0; background: #ffffff; padding: 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transform: translateY(-100%); z-index: 1000; transition: transform 0.3s ease;">
  这里是你的顶部横幅内容
</div>

<!-- 监听滚动方向，触发对应动画 -->
<amp-position-observer
  on="enter:hideBanner.start; exit:showBanner.start"
  layout="nodisplay"
  intersection-ratios="0"
  viewport-margins="0px 0px -50px 0px">
</amp-position-observer>

原理说明 #

• amp-position-observer通过配置的参数检测页面滚动状态：当用户向下滚动时，观察者触发enter事件，执行hideBanner动画把横幅移回视口外；当用户向上滚动时，触发exit事件，执行showBanner动画把横幅显示出来。
• 用transform: translateY(-100%)隐藏横幅，比display: none更适合做平滑过渡，用户体验更好。

内容的提问来源于stack exchange，提问作者Zvi Karp