如何防止 DOM 操作后页面的滚动位置重置？答案

【问题标题】：How to prevent page's scroll position reset after DOM manipulation?如何防止 DOM 操作后页面的滚动位置重置？
【发布时间】：2010-12-14 20:02:55
【问题描述】：

我有两个 JS 函数，一个是向选择框添加选项

function addOption(selectId, text, value) {
    var selectbox = document.getElementById(selectId);
    var optNew = document.createElement('option');
    optNew.text = text;
    optNew.value = value;
    try {
        selectbox.add(optNew, null); //page position resets after this
    }
    catch(ex) {
        selectbox.add(optNew);
    }    
}

另一个在类似简单的函数中执行 document.getElementById(formId).appendChild(newHiddenInput)。

它们都有效，元素按预期添加。但是，在调用其中任何一个时，页面将其滚动位置重置为 IE6 和 FF 中的页面顶部。没有回发，这纯粹是客户端操作。我在 Firebug 中设置了断点，它在 element.appendChild 或 select.add 执行后立即发生。我知道我可以使用 JS 手动设置滚动位置，但我认为在不重新渲染页面时没有必要。

我不是 JS 或 DOM 方面的专家，所以我很可能遗漏了一些东西，但我查看了 here 并使用 Try it Here 选项浏览了他们的示例，但我无法复制问题，表明我正在使用的代码库是罪魁祸首。

任何想法为什么要重置滚动位置？如果 jQuery 提供了更好的选择，我也可以使用 jQuery。

【问题讨论】：

标签： javascript html dom scroll

【解决方案1】：

如果从链接调用函数，您的链接中可能有一个内部锚点：

http://www.website.com/page.html#

这导致了上述行为。默认行为是，如果锚点不存在，则页面滚动位置跳转到顶部（scrollTop = 0）。

如果无论来源如何，每次函数调用都会发生这种情况，那么可以将其从列表中划掉。

【讨论】：

谢谢！这些函数是从样式的“按钮”调用的。我已将它们切换为跨标签并解决了问题。
这不是（必然）解决方案，但可能是您的情况。为了将来参考，当使用锚标记时，您通常希望其中有一个有效的 href，但可能不希望实际让它去任何地方，因为您正在使用 javascript 抢占行为。这时候你需要使用“return: false;”

【解决方案2】：

什么是激活事件？

如果它是一个锚点，那么在点击事件上你需要“return false;”在调用您的 jQuery/Ajax/jScript 代码之后。

如果它是一个按钮，您可能需要这样做。

我昨天遇到了这个问题，这就是解决方案。

所以<a href="#" onclick="DoStuff(); return false;">My link</a>

【讨论】：