jQuery表单提交后滚动动画完成后页面跳回顶部问题求助

问题根源 #

• 初始代码中，点击submit按钮后，滚动动画刚触发，表单就会提交并刷新页面，导致滚动被中断，页面重置回顶部。
• 加入e.preventDefault()后，虽然阻止了页面刷新、滚动正常，但表单数据无法提交到后端，目标div里的PHP渲染内容会缺失。

以下是两种针对性解决方案：

方案一：异步提交表单（推荐，无页面刷新） #

通过AJAX提交表单，完成数据处理后再执行滚动动画，既保留表单提交功能，又能稳定滚动到目标位置。

前端代码修改 #

$(document).ready(function(){
  $("#checkreg").click(function(e) {
    e.preventDefault(); // 阻止默认表单提交行为
    
    // 序列化表单数据
    const formData = $("#check").serialize();
    
    // AJAX提交请求
    $.ajax({
      url: "<?php echo $_SERVER['PHP_SELF'];?>",
      type: "POST",
      data: formData,
      success: function(response) {
        // 更新目标div的车辆信息内容
        $("#dvlares .panel-body").html(response);
        
        // 执行滚动动画
        $('html, body').animate({
          scrollTop: $("#dvlares").offset().top
        }, 2000);
      },
      error: function() {
        alert("提交失败，请重试");
      }
    });
  });
});

后端PHP配合处理 #

在页面顶部添加表单请求处理逻辑，返回车辆信息的HTML片段：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // 此处替换为你获取车辆信息的逻辑
  $vehicle = [
    'make' => 'Toyota',
    'year' => '2020',
    'colour' => 'Black',
    'engine' => '1500',
    'fuel' => 'Petrol'
  ];

  // 输出要更新的HTML内容
  echo "<p>Make : {$vehicle['make']}</p>
        <p>Registration Year : {$vehicle['year']}</p>
        <p>Body Colour : {$vehicle['colour']}</p>
        <p>Engine Capacity : {$vehicle['engine']}cc</p>
        <p>Fuel : {$vehicle['fuel']}</p>";
  exit;
}
?>

方案二：同步提交后自动滚动（页面刷新场景） #

如果必须保留页面刷新的提交方式，可在页面加载时判断表单提交状态，自动触发滚动。

前端代码修改 #

$(document).ready(function(){
  // 页面加载完成后，判断是否有表单提交记录或URL锚点
  const hasSubmitted = <?php echo isset($_POST['reg']) ? 'true' : 'false';?>;
  if (hasSubmitted || window.location.hash === '#dvlares') {
    // 可根据页面导航栏高度调整偏移量，避免被遮挡
    const scrollTarget = $("#dvlares").offset().top - 50;
    $('html, body').animate({
      scrollTop: scrollTarget
    }, 2000);
  }
});

后端可选优化 #

提交完成后重定向到带锚点的页面，确保刷新后锚点存在：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // 处理表单提交逻辑...
  
  // 重定向到当前页面并添加目标锚点
  header("Location: {$_SERVER['PHP_SELF']}#dvlares");
  exit;
}
?>

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