使用JavaScript appendChild添加元素时窗口跳顶问题求助

这种跳顶的糟心事我之前也碰到过！其实大概率不是appendChild本身的问题，而是你的交互触发了浏览器的默认行为，或者页面重排时的滚动异常。给你几个实用的排查和解决方向：

1. 先阻止点击事件的默认行为 #

看你代码里的触发按钮是<a>标签，哪怕href写了javascript:void(0)，有些浏览器还是会悄悄触发跳转默认行为导致滚到顶部。你可以在myFunction里加上阻止默认行为的代码：

function myFunction(event) { // 记得把event传进来
  // 你的添加表单元素的逻辑...
  const newInput = document.createElement('input');
  newInput.type = 'text';
  document.querySelector('.form-container').appendChild(newInput);
  
  event.preventDefault(); // 直接干掉默认跳转行为
}

更省心的办法是把<a>换成<button>标签，按钮本身就没有跳转的默认行为，从根源上避免这个坑。

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

如果是添加元素后页面高度变化导致的滚动偏移，那可以在添加前先记下当前的滚动位置，添加完再切回去：

function myFunction() {
  // 记录当前窗口滚动位置
  const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
  
  // 执行添加元素的操作
  const newFormItem = document.createElement('div');
  newFormItem.innerHTML = '<label>新字段：</label><input type="text">';
  document.getElementById('form-wrapper').appendChild(newFormItem);
  
  // 恢复之前的滚动位置
  window.scrollTo(0, currentScroll);
}

要是你的表单元素是放在某个带滚动条的容器里（不是整个窗口），那就要记录容器的scrollTop而不是窗口的，比如：

const container = document.getElementById('form-container');
const containerScroll = container.scrollTop;
// 添加元素...
container.scrollTop = containerScroll;

3. 检查容器的overflow设置 #

你说已经把div高度设够大，但可以确认一下容器的overflow属性是不是auto或者scroll？如果容器本身有滚动条，那窗口跳顶可能是容器滚动溢出导致的连锁反应，调整容器的样式或者用上面的容器滚动恢复方法就能解决。

4. 避开锚点触发的坑 #

如果你的触发逻辑里涉及到锚点（比如href里的#），哪怕是空锚点，浏览器也会默认滚动到页面顶部。确保所有触发添加元素的交互都不会碰锚点跳转的逻辑。

你可以先试试第一种方法，阻止默认行为，这是最常见的原因。要是还不行，再挨个排查后面的方向～

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