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>

This has very little context. Not sure what table nor scroll bar you are talking about. Post some code if you want help. Sorry this is just really vague. A link would be ok too. — awright18, Oct 24 '12 at 06:53
Sorry...Question updated...I cannot provide link, but at least I copied how my simplified table looks like. — Michal S, Oct 24 '12 at 07:22

score 1 · Answer 1 · edited May 23 '17 at 10:32

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...

I put that at the beginning of my document in the section... Downloaded jQuery cookie plugin, but it still doesn´t work :/ Am I missing something? — Michal S, Oct 26 '12 at 06:56
And of course I renamed ".yourTableContainerDIV" to id of my div, ".tableContainer" (I added that later, its not in my original question) — Michal S, Oct 26 '12 at 07:14
Hmm... If you're using [this table](http://stackoverflow.com/questions/13043837/scrollable-table-with-fixed-header), I got the `.yourTableContainerDIV` bit wrong, it should be `.scrollContent` (the tbody). And, for some reason, the value is set to 0 before the `$(window).unload` method is called. If I add `var i;window.setInterval(function(){i=$(".scrollContent").scrollTop()}, 100);` before `$(window).unload` and change `$.cookie("scroll", $(".yourTableContainerDIV").scrollTop() );` to `$.cookie("scroll", i);`, it works great, but you've got a function being called every tenth of a second. — Simon M, Oct 26 '12 at 23:15
Unfortunately, none of the code works for me...Is it possible I need to include something in the code to make this work? The script itself seems simple enough so I don´t think its wrongly implemented... — Michal S, Oct 29 '12 at 07:53

score 0 · Answer 2 · edited Jun 11 '21 at 18:51

Here is a 100% working solution for persistent table scroll position for anyone who needs it.

    // save position of table scroll
    $(function () {
        // If cookie is set, scroll to the position saved in the cookie.
        if ($.cookie("scroll") !== null) {
            $('#bScroll').scrollTop($.cookie("scroll"));
        }
    });

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

Set tbody id='bScroll' and you are good to go.

Simple and guaranteed without fail. There are many 'solutions' out there but none worked for me except this one.

Remember scroll bar position in the HTML/CSS table

2 Answers2