点击按钮重定向页面后自动滚动到指定ID失效问题排查

原代码的问题分析 #

你当前的代码逻辑完全搞反了：你在当前页面尝试滚动到#contractLstTable元素，但这个元素实际是在跳转后的目标页面里，当前页面根本没有这个元素，所以滚动动画不会触发，即便触发了，跳转后新页面也不会保留这个状态。

可行解决方案 #

方案1：利用URL锚点（最简单原生实现）

直接在跳转的URL末尾加上目标元素的ID作为锚点，浏览器会自动定位到对应元素。

修改你的按钮点击事件代码：

$("#createContractBtn").on("click", function(e) { 
   e.preventDefault();
   // 在URL后加上锚点#contractLstTable
   window.location = "{{ route('searchEnquiry', app()->getLocale()) }}?xxx=" + encryptedXXX + "#contractLstTable";
});

这种方式是浏览器原生支持的，无需额外JS，缺点是滚动是瞬间完成的，没有平滑过渡效果。

方案2：平滑滚动到目标元素（需要目标页面配合）

如果需要平滑滚动的动画效果，需要在目标页面添加监听逻辑，页面加载完成后检测URL锚点，执行平滑滚动。

1. 修改按钮跳转代码（依然带上锚点）：

$("#createContractBtn").on("click", function(e) { 
   e.preventDefault();
   window.location = "{{ route('searchEnquiry', app()->getLocale()) }}?xxx=" + encryptedXXX + "#contractLstTable";
});

2. 在目标页面的JS中添加以下代码：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
   // 获取URL中的锚点
   const targetId = window.location.hash.slice(1);
   if (targetId) {
      const targetElement = document.getElementById(targetId);
      if (targetElement) {
         // 执行平滑滚动
         targetElement.scrollIntoView({
            behavior: 'smooth',
            block: 'start' // 可调整为'center'等定位方式
         });
      }
   }
});

如果目标页面使用jQuery，也可以这么写：

$(document).ready(function() {
   const targetId = window.location.hash.slice(1);
   if (targetId) {
      const $target = $("#" + targetId);
      if ($target.length) {
         $('html, body').animate({
            scrollTop: $target.offset().top
         }, 1500); // 动画时长，和你原代码保持一致
      }
   }
});

注意事项 #

• 确保目标页面中确实存在id="contractLstTable"的元素，ID拼写必须完全一致，区分大小写。
• 如果目标页面是异步加载内容（比如数据表格通过AJAX渲染），需要在内容加载完成后再执行滚动逻辑，而非页面DOM加载完成就触发。

内容的提问来源于stack exchange，提问作者MERN Stack Developer