Question

我有两个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。

Answer 1

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

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

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

如果在每个函数调用中都发生这种情况而不管源是什么，那么这可以从列表中删除。

Answer 2

什么是激活活动？

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

如果是按钮，您可能需要执行相同的操作。

昨天我遇到了这个问题，这是决议。

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

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

2 个答案: