使用jQuery实现表单提交后滚动页面的问题

我尝试使用jQuery按顺序执行两项操作：

1. 提交会重新加载页面的HTML表单
2. 滚动到页面的指定位置

页面中的HTML代码如下：

<p>Zoom to <span class='links world'>the World</span>.</p>
<form id="world" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
<input type="hidden" name="world" value = "world">
</form>

对应的jQuery代码为：

$(".world").click(function(){
$("#world").submit(), function(){
$("html,body").animate({scrollTop: $("#mapspace").offset().top}, 800);
};
});

目前表单能提交并重新加载页面，但滚动操作不生效。单独执行提交和滚动动画均能正常工作。我猜测可能是回调在表单提交后立即执行，而非页面重新加载后，请问该如何解决？或是存在其他问题？

你猜的没错——表单提交会触发页面刷新，当前页面的JS代码会被直接销毁，后续的滚动回调根本没机会在新加载的页面中执行。要解决这个问题，需要把滚动逻辑放到页面重新加载完成后执行，同时通过表单传递的信号判断是否需要触发滚动：

方案一：后端配合传递标记 #

1. 后端添加判断逻辑
   表单提交后，后端渲染页面时，新增一个判断变量，标记是否需要执行滚动：

   <?php
   $needScroll = isset($_POST['world']) && $_POST['world'] === 'world';
   ?>
   

2. 页面加载后执行滚动
   将滚动逻辑放入$(document).ready()中，根据后端输出的标记决定是否执行动画：

   $(document).ready(function() {
       <?php if ($needScroll): ?>
           $("html,body").animate({scrollTop: $("#mapspace").offset().top}, 800);
       <?php endif; ?>
   });
   

3. 修正原点击事件代码
   原点击事件存在语法错误（误用逗号，并非正确的回调写法），简化为直接提交表单即可：

   $(".world").click(function(){
       $("#world").submit();
   });
   

方案二：无后端依赖（URL参数传递） #

如果不想修改后端代码，可以通过URL参数传递滚动标记：

1. 修改表单的action属性
   在表单提交的目标URL中添加参数：

   <form id="world" action="<?php echo $_SERVER['PHP_SELF'] ?>?scroll=mapspace" method="post">
   

2. 页面加载时读取URL参数
   在页面就绪后解析URL参数，判断是否需要执行滚动：

   $(document).ready(function() {
       const urlParams = new URLSearchParams(window.location.search);
       if (urlParams.get('scroll') === 'mapspace') {
           $("html,body").animate({scrollTop: $("#mapspace").offset().top}, 800);
       }
   });
   

内容的提问来源于stack exchange，提问作者TrapezeArtist