Remember scroll bar position in the HTML/CSS table

Question

Could somebody help me to get this working? I suppose I need to use JS for this, but I have very little experience with it... so I think some code sample could be useful. I got simple table like this (for simplification I didn't copied content of table, because its a lot of code and not relevant.

<div style="overflow:auto; height:600px; border:2px solid black; border-radius:5px; background:white">
<table style="width:100%; border-collapse:collapse">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>

Answer 1

In jQuery (this will save a cookie with the scroll position):

// When document is ready...
$(document).ready(function() {

    // If cookie is set, scroll to the position saved in the cookie.
    if ( $.cookie("scroll") !== null ) {
        $(".yourTableContainerDIV").scrollTop( $.cookie("scroll") );
    }

    // On window unload, save cookie
    $(window).unload(function() {
        $.cookie("scroll", $(".yourTableContainerDIV").scrollTop() );
    });
});

Taken from this answer, with a few tiny modifications.

EDIT:

So it doesn't quite work.

The first problem is that if you're using this table, it isn't the container DIV's scrollTop that you need to read, it's the tbody that you need to look at.

And the second problem is that the value of $(".scrollContent").scrollTop() becomes 0 before $(window).unload() is called. When I modify the code like this:

// When document is ready...
$(document).ready(function() {

    // If cookie is set, scroll to the position saved in the cookie.
    if ( $.cookie("scroll") !== null ) {
        $(".yourTableContainerDIV").scrollTop( $.cookie("scroll") );
    }

    // Set i to the current scroll position every 100 milliseconds.
    var i;
    window.setInterval(function(){i=$(".scrollContent").scrollTop()}, 100);

    // On window unload, save cookie.
    $(window).unload(function() {
        $.cookie("scroll", i);
    });
});

it works great! But then you've got a function being called and a value being set every tenth of a second, which isn't too good for performance. An alternative is to use window.beforeUnload like so:

// When document is ready...
$(document).ready(function() {
    // If cookie is set, scroll to the position saved in the cookie.
    if ( $.cookie("scroll") !== null ) {
        $(".yourTableContainerDIV").scrollTop( $.cookie("scroll") );
    }
});

window.onbeforeunload = function(){
    $.cookie("scroll", $(".scrollContent").scrollTop());
    return;
}

which works great in most browsers and doesn't involve intervals, but it doesn't work in Opera.

Hope this helps...