AMP: Scroll to id by Select change value?

Question

I would like to know how to implement a select with various options which, when selected, jumps to the part of the content which you selected in the list.

Based on: 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> 

Thanks in advance!

Answer 1

This is currently not possible (but should be). Here is a feature request .

Answer 2

If you need something immediate while waiting for the feature to get implemented as Sebastian Benz has posted... you could try something like this. It requires the use of a button and isn't super elegant nor does it dynamically scale, but it will give you the scroll to jumps you're looking for.

It takes the value from the selected option and uses amp-bind to hide and show the correctly linked button.

<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>

You'll need these three amp components to make it work.

<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>