在成功提交表单时更新状态后，如何在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（）操作。

滚动到（持续时间=整数，位置=字符串）

使用平滑动画将元素滚动到视图中。如果已定义，duration以毫秒为单位指定动画的长度（默认值为500ms）<“代码>位置”是可选的，并采用顶部、中心或底部中的一种来定义元素在视口中滚动结束的位置（默认值为顶部）。

Answer 2

放置html代码

添加一个动作和事件：ANY_ID. scrollTo（）

就你而言：

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

灯箱关闭示例：单击此处查看