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

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秒的等待时间，一遍又一遍。

- Brad45

---

你尝试过直接加载它而不是淡出再淡入吗？ - Nathan

这可能会对你有所帮助：https://dev59.com/40XRa4cB1Zd3GeqPsYa4 - Lawrence Cherone

Answer 1

这样可以阻止它到达顶部：

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

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

这将使元素仅加载而不是淡出再淡入。

希望这可以帮助您。

- Nathan

---

那很好。我相信淡出是问题所在，无论是最终失败还是将用户带回顶部的方式。非常感谢你。 - Brad45

Answer 2

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

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

- jfriend00

Answer 3

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

但是，根据您的操作，如果您正在加载新内容，可能将内容加载到另一个隐藏的 div 中，然后使用所需的效果将新内容附加到可见的 div 中会更有帮助。

希望对您有所帮助。

- svrx