javascript - AJAX 加载和页面滚动

Question

我需要帮助解决以下问题。我的页面上有一个按钮，按下该按钮会通过 AJAX 将内容加载到位于该按钮下方的“div”元素中。一切正常，但有一件事。每次按下按钮，页面都会滚动一点，但我希望它保持原位。

这是我的 HTML 代码:

<input type="button" name="calculate" value="Calculate"
    onclick="invoke(this.form, this.name, '#result')"/>

这是我的 JavaScript 代码(我使用的是 jQuery):

function invoke(form, event, container) {
    $('input[type="button"]').attr('disabled', 'disabled');
    $(container).html('<br/><div class="img"><img src="/Test/img/ajax-loader.gif"/><div>');
    $(container).load(form.action, event + '&' + $(form).serialize());
}

我搜索了其他帖子，但没有找到任何可行的解决方案。如有任何建议，我们将不胜感激!

Answer 1

我找到了问题出在哪里。由于加载到“div”元素中的内容会随着每次按下按钮而改变其高度 2 次，因此页面正文的高度也会发生变化。这就是滚动的原因。我在 css 文件中固定了“div”元素的高度:

div#result {height: 200px;}

这解决了问题。