如何在成功提交表单后更新状态后滚动到 AMP 的顶部? [英] How to scroll to top in AMP after updating a state on successful form submission?

问题描述

我在我的 AMP 页面中创建了一个排序功能，现在当我请求对结果进行排序以及在成功提交表单后更新状态时，页面滚动位置保持不变.我希望页面在排序完成后更新状态时滚动到顶部.

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.

这是我的代码:

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

推荐答案

放置 html 代码 </span>

Place a html code <span id="ANY_ID"></span>

添加动作和事件:ANY_ID.scrollTo()

add a action and event : ANY_ID.scrollTo()

就你而言:

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

灯箱关闭示例:点击此处查看

这篇关于如何在成功提交表单后更新状态后滚动到 AMP 的顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！