Scroll position lost when hiding div

Question

http://jsfiddle.net/cbp4N/16/

If you show the div. Change the scroll position and then hide and show it agian the scroll position is lost.

am I doing anything wrong or is this a bug. Is there a way round it with som plugins.

/Anders

Thanks for the answers and solutions. But what if the div that I hide is a outer div and the scrolling div is deep inside the div I hide. Is there a smart way to also fix this. Becuse now I cant set/save the scroll position in the callback of the hide/show

Answer 1

Jquery's .scrollTop() works well if you maintain the position as data.

$('#cbxShowHide').click(function(){
    if(this.checked) {
        $('#block').show('fast',function() {
            $(this).scrollTop($(this).data('scroll'));
        });
    }
    else {
       $('#block').data('scroll',$('#block').scrollTop());
        $('#block').hide('fast');
    }
});

example

Answer 2

This is normal behaviour because the element is set to the least possible variables to memory when you hide it. If you want to remember scroll position you'll have to store those yourself and then apply the scroll position on showing it.

Scroll Position of div with "overflow: auto"