How to scroll to top in AMP after updating a state on successful form submission?

问题

I have created a sort functionality in my AMP page,now when I make a request to sort the results and when I update the state after successful form submission the page scroll position remains same. I want the page to scroll to top whenever the state is updated after sorting is done.

This is my code:

<form method="GET" 
          action="http://localhost:3001/api/v2/<%=@taxonomy%>/<%=@taxon%>" 
          action-xhr="http://localhost:3001/api/v2/<%=@taxonomy%>/<%=@taxon%>"
          target="_top" 
          on="submit-success: AMP.setState({
                        product_list: {
                        detail: event.response.detail
                        }
                    }),sort_lb.close();">
            <input type="hidden" name="sort" value="pop">
            <input type="submit" value="Popularity" class="sort_submit_btn">

</form>

回答1:

Place a html code <span id="ANY_ID"></span>

add a action and event : ANY_ID.scrollTo()

In your case :

on="submit-success: AMP.setState({
                        product_list: {
                        detail: event.response.detail
                        }
                    }),YOUR_ID.scrollTo(),sort_lb.close();">

An example of light-box close : click here for view

回答2:

I suggest looking into using element-specific actions such as the scrollTo() action.

scrollTo(duration=INTEGER, position=STRING)

Scrolls an element into view with a smooth animation. If defined, duration specifies the length of the animation in milliseconds (default is 500ms). position is optional and takes one of top, center or bottom defining where in the viewport the element will be at the end of the scroll (default is top).

来源：https://stackoverflow.com/questions/53370461/how-to-scroll-to-top-in-amp-after-updating-a-state-on-successful-form-submission