AMP：通過選擇更改值滾動到ID？

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

目前尚不可能（但應該這樣做）。 這是功能要求 。

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>