Colorbox stop background scroll and return to same location on parent page

Question

I have an unordered list that I've created in drupal 7 using views. Each list item has a link that opens a colorbox. If you put the mouse on the faded background of the colorbox (which is the parent page) you can scroll the parent page. What I'm after is the parent page to stop scrolling and return to the same position/anchor on parent page when its closed.

Searching through questions on here I found the code:

$(document).bind('cbox_open', function () {
    $('html').css({ overflow: 'hidden' });
}).bind('cbox_closed', function () {
    $('html').css({ overflow: 'auto' });
}); 

The code above works but puts the parent page scroll back to the very top.

This would work if I could do it dynamically;

$("html,body").scrollTop(400); // 300 is just a example

Any ideas?

Answer 1

kannix got it. I'd just hide the overflow on the body, the html's overflow is probably fine.

$(document).bind('cbox_open', function() {
    $('body').css({ overflow: 'hidden' });
}).bind('cbox_closed', function() {
    $('body').css({ overflow: '' });
});​

However, it shouldn't be scrolling back to the top. Setting the scrolltop is just papering over another problem (such as not canceling the default action on an a clicked anchor element).

Answer 2

I think you can do something like this:

var position;
$(document).bind('cbox_open', function() {
    position = $("html,body").scrollTop();
    $('html').css({
        overflow: 'hidden'
    });
}).bind('cbox_closed', function() {
    $('html').css({
        overflow: 'auto'
    });
    $("html,body").scrollTop(position);
});​