Basically I have lots of content to be shown inside the colorbox plugin, and I want to scroll into certain part by program.
The colorbox part works fine. The simplified code looks like this (nothing special here):
$.colorbox({href: '#my_content', inline:true, onComplete(){go_there()}});
The scroll part, if using without colorbox, also works fine. The code looks like this:
$('html,body').animate({scrollTop: 1234}, 100); // 1234 here is just example
When combining above two parts, scrolling does not happen. And then I think I need to change the 'html, body' string into something else, so I immediately tried $("#my_content").animate(...) but no luck, and then I tried "#cboxContent", "#cboxWrapper", "#colorbox". None of them works.
(I gonna provide an answer soon.)
After searching around for similar code snippets, I realize a pattern, that the scrollTop must only be applied to one of your content wrappers which has an overflow:auto style!
Correct direction found, I soon check up colorbox.css and identified the wanted container. It is '#cboxLoadedContent'. So this one works like a charm:
$('#cboxLoadedContent').animate({scrollTop: 1234}, 100);
The principle might be straightforward, but it really took me some time to figure out. So hopefully this post can help someone like me.