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

I'm testing some Jquery Ajax scripts and one of them is actually quite nice. The only problem I have with it, is that when it refreshes my div, it takes you back to the top of the div.

The div loads MYSQL results from an outside php script. So if the user is halfway down the page reading, when the ajax call goes out, it takes them to the top of the div.

It's important for them to be able to read uninterrupted.

Here's my code:

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

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

So would it be possible to have just a stack effect by modifying the code, or would I need to look at a completely different option?

Also I would like to note that after so long, this script starts to fail. It gets to the point where it's constantly refreshing the div. No 20 second wait, just again and again.

This should stop it from going to the top:

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

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

This will make it just load instead of fading the element out and then back in.

I hope this helps.

You can use jQuery's .scrollTop() and .scrollLeft() to save the scroll position before loading your content and then set the scroll position back to those values after loading the content. If the content has changed significantly above the reading position, it won't necessarily go back to the exact same position, but if the content hasn't changed significantly or if the place that it changed is below what was being viewed, it should restore back to the exact same spot.

A more complicated approach would involve identifying a marker object that's on screen and visible and using jQuery .offset() and position(), you obtain that objects location on screen and then after loading the new content, you adjust the scroll position until that marker object is again positioned in the same place. This approach is a lot more work, but would give better results if the content changes significantly.

The effect occur because when the content is loaded the div probably is recreated, and that makes the browser go to the top of the div. You can save the scroll position and try to restore it after.

But depending on what you're doing, if you're loading new content probably it will be helpfull to load the content into another hidden div and then append the new content to the visible div using the effects u want.

Hope it helps.