如何在彩盒内进行scrollTop？

Question

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

Answer 1

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.