39

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 newtbody normally has the same vertical height as the one it replaced, we should be able to make the script do it instead.

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:

var scrollsave = $('body').scrollTop();
$('#thetable tbody').replaceWith(newtbody);
$('body').scrollTop(scrollsave);

but no joy. I haven't resorted to jQuery.ScrollTo yet.

  • That should work. Can you post a demo? Which element is scrollable? – SLaks Jan 05 '10 at 20:56
  • Only the page is scrolled. No elements within the markup are scrollable. I'll see what I can do about a demo. –  Jan 05 '10 at 21:16

6 Answers6

47

We had the exact same problem, and the following code works great...

var scroll = $(window).scrollTop();
// yada
$("html").scrollTop(scroll);
Josh Stodola
  • 79,922
  • 46
  • 179
  • 226
  • 1
    I tried it. Also no luck. Debugging shows that no matter what I use as selector in the first line, be it `window`, `"body"`, `"html"`, etc., the value returned by `scrollTop(...)` is always zero. Odd! Could the context of being in a anonymous callback possibly affect that? –  Jan 05 '10 at 21:15
  • That's weird. Scroll down on this page. Paste this in your browser address bar and press enter: `javascript:alert($(window).scrollTop());` It works fine for me here on IE8. – Josh Stodola Jan 05 '10 at 22:17
  • There's something whacky about my pages that's preventing this from working. But I think your answer is correct for most reasonable pages. –  Apr 29 '10 at 10:11
  • I think I just found an issue here: If you develop and experiment with setting scrolling position, remember that the browser tries to be clever and tries to restore previous scrolling positions. In Chromium (version of Ubuntu 12.04), reloading (Ctrl-R) doesn't do the trick, I have to retype (Ctrl-L Enter) the URL. – Felix Rabe Jul 06 '12 at 16:16
  • 5
    Need to use `$(window).scrollTop(scroll);` in Chrome (29). – Evan Mulawski Aug 09 '13 at 13:19
  • Thanks for the tip! I ended up using `$("html, body").scrollTop(window.scrollY - 1000);` to scroll up 1000 px. – nshiff May 12 '17 at 14:27
30
var position= $(window).scrollTop();

//some things here

$(window).scrollTop(position);

It worked for me in both IE8 and FF.

DDetto
  • 301
  • 2
  • 3
  • 2
    Also it makes more sense. – Henrik Nov 26 '13 at 10:58
  • This answer also works for scrolling elements other than the window, for example if you have a modal with scrollable content you just replace `window` with `"#your-element-selector"` and it works like a charm! – SergeyB Jul 22 '15 at 19:51
  • This answer works in IE, FF and Chrome. But in FF and Chrome the page has a flashing. It goes to top and then to the current position. I used 'event.preventDefault();' , but nothing changed. – Mohsen Jan 16 '18 at 20:37
4

Be sure to use return false; to terminate your function(){} construct.

The event trigger may be trying to execute the default action of the target DOM element i.e., < a href="" >;

jonsca
  • 9,627
  • 26
  • 54
  • 61
duttyman
  • 131
  • 1
  • 2
  • omg finally! thanks to your comment I could denegate the event so the page doesn't scroll to its previous position all the time. Useful tip, thanks! – Pauls Aug 11 '13 at 18:24
1

Are u use aspx? if it's 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>
Ngô Đức Tuấn
  • 73
  • 6
0

You could periodically check the div outerHeight, and set the scrollTop property once the div rendering has crossed the scroll value. 

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

g_ScrollTop=$(window).scrollTop() ;
g_Interval=setInterval(checkAndAdjustScroll, 100) ;

You might need to make adjustments based on the offset of your div from the top of the page

pragman
  • 1,464
  • 14
  • 19
0

Try to use .html() instead of .replaceWith():

$('#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.

Enfernuz
  • 51
  • 4