使用 jQuery 恢复页面滚动位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2009029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Restoring page scroll position with jQuery
提问by Josh Stodola
I have a page operation that uses something like:
我有一个使用类似以下内容的页面操作：
$('#thetable tbody').replaceWith(newtbody);
in an ajax callback. Sometimes, if the user had scrolled the page down, this operation has the understandable side effect of scrolling the page back up. But the replacement appears seamless to the user so it's a bit annoying to have to scroll back down again. And since the newtbodynormally has the same vertical height as the one it replaced, we should be able to make the script do it instead.
在 ajax 回调中。有时，如果用户向下滚动页面，则此操作会产生向上滚动页面的副作用，这是可以理解的。但是替换对用户来说似乎是无缝的，所以不得不再次向下滚动有点烦人。并且由于newtbody通常具有与其替换的相同的垂直高度，我们应该能够让脚本代替它。
Now, since I found that executing:
现在，因为我发现执行：
$('body').scrollTop(300);
from the JS debugger console does what I hoped it would, I thought the simple remedy would be:
从 JS 调试器控制台做我希望它会做的事情，我认为简单的补救措施是：
var scrollsave = $('body').scrollTop();
$('#thetable tbody').replaceWith(newtbody);
$('body').scrollTop(scrollsave);
but no joy. I haven't resorted to jQuery.ScrollToyet.
但没有快乐。我还没有使用jQuery.ScrollTo。
回答by Josh Stodola
We had the exact same problem, and the following code works great...
我们遇到了完全相同的问题，以下代码效果很好......
var scroll = $(window).scrollTop();
// yada
$("html").scrollTop(scroll);
回答by DDetto
var position= $(window).scrollTop();
//some things here
$(window).scrollTop(position);
It worked for me in both IE8 and FF.
它在 IE8 和 FF 中都对我有用。
回答by duttyman
Be sure to use return false;to terminate your function(){}construct.
请务必使用return false;来终止您的function(){}构造。
The event trigger may be trying to execute the default action of the target DOM element i.e., < a href="" >;
事件触发器可能正在尝试执行目标 DOM 元素的默认操作，即， < a href="" >;
回答by Ng? ??c Tu?n
Are u use aspx? if it's aspx:
你用的是aspx吗？如果是aspx：
$(document).ready(function () {
//------------ scroll-------------
$('body').scrollTop(document.getElementById('<%=hdScroll.ClientID%>').value);
$(window).scroll(function () {
$("#<%= hdScroll.ClientID %>").val($(window).scrollTop());
//alert(document.getElementById('<%=hdScroll.ClientID%>').value);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<asp:HiddenField Id="hdScroll" runat="server"></asp:HiddenField>回答by Enfernuz
Try to use .html()instead of .replaceWith():
尝试使用.html()代替.replaceWith()：
$('#thetable tbody').html( newtbody.html() );.
$('#thetable tbody').html( newtbody.html() );.
I don't know about possible performance bottlenecks here, but it did the trick for me when I was trying to preserve the scroll position of a div, and it seems to do well with the scroll position of the entire page as well.
我不知道这里可能存在的性能瓶颈，但是当我试图保留 div 的滚动位置时，它对我有用，而且它似乎对整个页面的滚动位置也很好。
回答by pragman
You could periodically check the divouterHeight, and set the scrollTopproperty once the divrendering has crossed the scroll value.
您可以定期检查divouterHeight, 并scrollTop在div渲染越过滚动值后设置该属性。
var g_Interval ;
var g_ScrollTop ;
function checkAndAdjustScroll() {
var height=$('#content').outerHeight() ;
if(height>g_ScrollTop) {
$(window).scrollTop(g_ScrollTop) ;
clearInterval(g_Interval) ;
}
}
And whenever you update your div with AJAX content, do this
每当您使用 AJAX 内容更新 div 时，请执行以下操作
g_ScrollTop=$(window).scrollTop() ;
g_Interval=setInterval(checkAndAdjustScroll, 100) ;
You might need to make adjustments based on the offset of your divfrom the top of the page
您可能需要根据您div与页面顶部的偏移量进行调整
