Как прокрутить вверх в AMP после обновления состояния при успешной отправке формы?

Question

Я создал функцию сортировки на моей странице AMP, теперь, когда я делаю запрос на сортировку результатов и когда я обновляю состояние после успешной отправки формы, позиция прокрутки страницы остается прежней. Я хочу, чтобы страница прокручивалась вверх при каждом обновлении состояния после сортировки.

Это мой код:

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

Answer 1

Я предлагаю рассмотреть использование специфических для элемента действий , таких как действие scrollTo().

scrollTo (duration = INTEGER,position = STRING)

Прокручивает элемент в поле зрения с плавной анимацией.Если определено, duration указывает длину анимации в миллисекундах (по умолчанию 500 мс).position является необязательным и принимает одно из значений top, center или bottom, определяющих, где в области просмотра элемент будет находиться в конце прокрутки (по умолчанию top).

Answer 2

Поместите HTML-код <span id="ANY_ID"></span>

, добавьте действие и событие: ANY_ID.scrollTo()

В вашем случае:

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

Пример закрытия лайтбокса: Нажмите здесь для просмотра