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

【问题标题】：How to scroll to top in AMP after updating a state on successful form submission?成功提交表单后更新状态后如何在 AMP 中滚动到顶部？
【发布时间】：2018-11-20 19:20:26
【问题描述】：

我在我的 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>

【问题讨论】：

标签： amp-html

【解决方案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

【讨论】：

【解决方案2】：

我建议考虑使用element-specific actions，例如scrollTo() 操作。

scrollTo(duration=INTEGER, position=STRING)

使用流畅的动画将元素滚动到视图中。如果已定义，duration 以毫秒为单位指定动画的长度（默认为 500 毫秒）。 position 是可选的，它采用top、center 或bottom 之一，定义元素在视口中的位置将在滚动结束处（默认为top）。

【讨论】：