Question

我正在测试一些Jquery Ajax脚本，其中一个实际上非常好。我遇到的唯一问题是，当它刷新我的div时，会将你带回div的顶部。

div从外部php脚本加载MYSQL结果。因此，如果用户在页面读取的中途，当ajax调用结束时，它会将它们带到div的顶部。

让他们能够不间断地阅读是非常重要的。

这是我的代码：

<script>
var auto_refresh = setInterval(
function()
{
$('#test').fadeOut("slow").load('tehloader2.php?load=tester').fadeIn("slow");
}, 20000);
</script>

<br /><br />
<div id="test"></div>

那么通过修改代码只能产生堆栈效果，或者我需要查看完全不同的选项吗？

另外我想要注意，经过这么长时间，这个脚本开始失败。它达到了不断刷新div的程度。没有20秒等待，只是一次又一次。

Answer 1

这应该阻止它走到顶端：

<script>
var auto_refresh = setInterval(
function()
{
$('#test').load('tehloader2.php?load=tester');
}, 20000);
</script>

<br /><br />
<div id="test"></div>

这将使它只是加载而不是将元素淡出然后再返回。

我希望这会有所帮助。

Answer 2

您可以使用jQuery的.scrollTop()和.scrollLeft()在加载内容之前保存滚动位置，然后在加载内容后将滚动位置设置回这些值。如果内容的变化明显高于阅读位置，则不一定会返回到完全相同的位置，但如果内容没有显着变化，或者变化的位置低于正在查看的位置，则应该恢复回到完全相同的地方。

更复杂的方法是识别屏幕上可见的标记对象并使用jQuery .offset()和position()，在屏幕上获取对象位置，然后在加载新内容后调整滚动位置，直到该标记对象再次位于同一位置。这种方法需要做很多工作，但如果内容发生重大变化，效果会更好。

Answer 3

效果发生是因为加载内容时可能会重新创建div，这会使浏览器转到div的顶部。您可以保存滚动位置并尝试在之后恢复。

但是，根据您正在做的事情，如果您正在加载新内容，那么将内容加载到另一个隐藏的div中然后将新内容附加到可见的div会有所帮助使用你想要的效果。

希望它有所帮助。

如何阻止我的脚本返回到页面顶部？

3 个答案: