如何在成功提交表单后更新状态后滚动到 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

放置一个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();">

灯箱关闭示例：click here for view

Answer 2

我建议考虑使用 element-specific actions such as the scrollTo() 操作。

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

如何在成功提交表单后更新状态后滚动到 AMP 顶部？

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

amp-html