Ajax请求触发后页面自动滚动至顶部的解决方法咨询

常见原因及解决方案 #

1. 阻止按钮的默认点击行为 #

如果你的按钮是<a>标签（比如带href="#"）或者表单内的submit类型按钮，点击时会触发浏览器默认行为（跳转或表单提交），导致页面滚动到顶部。只需在点击事件中阻止默认行为即可：

$("#number").on("click", function(event) {
  // 阻止浏览器默认点击行为
  event.preventDefault();
  
  $.ajax({
    url: 'list.php',
    method: 'POST',
    data: {
      number: '{$ID}'
    },
    success: function(data) {
      console.log(data);
      $("#page_details").html(data);
    }
  });
});

2. 保存并恢复滚动位置 #

如果替换#page_details内容后，页面高度发生大幅变化（比如原内容很长，新内容很短），也会导致页面滚动位置改变。这种情况需要先记录点击时的滚动位置，数据加载完成后恢复：

$("#number").on("click", function(event) {
  event.preventDefault();
  
  // 记录当前窗口滚动位置
  const currentScrollPos = $(window).scrollTop();
  
  $.ajax({
    url: 'list.php',
    method: 'POST',
    data: {
      number: '{$ID}'
    },
    success: function(data) {
      console.log(data);
      $("#page_details").html(data);
      // 恢复之前的滚动位置
      $(window).scrollTop(currentScrollPos);
    }
  });
});

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