CODEWITHSUNDEEP
amp-html
Abhinav Bharti
Abhinav Bharti

Reputation: 3

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>

Upvotes: 0

Views: 1419

Answers (2)

Jacque
Jacque

Reputation: 765

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

Upvotes: 0

Bachcha Singh
Bachcha Singh

Reputation: 3934

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

Upvotes: 1

Related Questions