Question

我想知道如何使用各种选项来实现选择，当选择这些选项时，它们会跳到您在列表中选择的内容部分。

基于：https://ampbyexample.com/visual_effects/scroll_to_top/

<select on="change:{event.value}.scrollTo(duration=200)" id="st-select">
  <option selected disabled hidden value="st-select">Quick Select...</option>
  <option value="1">Option #1</option>
  <option value="2">Option #2</option>
  <option value="3">Option #3</option>
  <option value="4">Option #4</option>
  <option value="5">Option #5</option>
  <option value="6">Option #6</option>
  <option value="7">Option #7</option>
</select>
... for example..
<div id="3"></div>

谢谢！

Answer 1

目前尚不可能（但应该如此）。这是feature request。

Answer 2

如果您像塞巴斯蒂安·奔驰（Sebastian Benz）发布的那样，在等待该功能实现之前需要立即提供的东西，您可以尝试这样的事情。它需要使用一个按钮，并且不是超级优雅，也不动态缩放，但是它将为您提供滚动滚动以查找所需的跳转。

它从所选选项中获取值，并使用amp-bind隐藏和显示正确链接的按钮。

<select on="change:AMP.setState({pageJump : event.value})" id="st-select">
    <option selected disabled hidden value="st-select">Quick Select...</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>
    <option value="3">Option #3</option>
    <option value="4">Option #4</option>
    <option value="5">Option #5</option>
    <option value="6">Option #6</option>
    <option value="7">Option #7</option>
</select>

<button hidden [hidden]="pageJump != 1" id="pageJump" on="tap:1.scrollTo(duration=200)" class="scrollToNumber">Jump To 1</button>
<button hidden [hidden]="pageJump != 2" id="pageJump" on="tap:2.scrollTo(duration=200)" class="scrollToNumber">Jump To 2</button>
<button hidden [hidden]="pageJump != 3" id="pageJump" on="tap:3.scrollTo(duration=200)" class="scrollToNumber">Jump To 3</button>
<button hidden [hidden]="pageJump != 4" id="pageJump" on="tap:4.scrollTo(duration=200)" class="scrollToNumber">Jump To 4</button>
<button hidden [hidden]="pageJump != 5" id="pageJump" on="tap:5.scrollTo(duration=200)" class="scrollToNumber">Jump To 5</button>
<button hidden [hidden]="pageJump != 6" id="pageJump" on="tap:6.scrollTo(duration=200)" class="scrollToNumber">Jump To 6</button>
<button hidden [hidden]="pageJump != 7" id="pageJump" on="tap:7.scrollTo(duration=200)" class="scrollToNumber">Jump To 7</button>

您需要这三个放大器组件才能使它工作。

<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>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

AMP：通过选择更改值滚动到ID？

2 个答案: