Jquery scrolling out/in text box

I am using a scrolling box that is working fine * see here * as long as I do not have a huge content under it such as:

<article class="content">                                                                           
                    <ul>
                        <li>
                            <a title="Video" href=".php">
                                <img alt="" src=".jpg" width="200" height="124"/>
                                <span>video</span>
                                <strong>Motion Graphics</strong>
                            </a>
    开发者_运维百科                    </li>
                                                    <li>
                            <a title="Video" href=".php">
                                <img alt="" src=".jpg" width="200" height="124"/>
                                <span>video</span>
                                <strong>Motion Graphics</strong>
                            </a>
                        </li>
                        <li>
                            <a title="Video" href=".php">
                                <img alt="" src=".jpg" width="200" height="124"/>
                                <span>video</span>
                                <strong>Motion Graphics</strong>
                            </a>
                        </li>

Problem When I do have a bunch of content the scrolling box does not behave properly. It behaves as the first Scrolling babe scrolling content. It moves weirdly from top to bottom and does not scroll down properly.

I can not understand why is not working fine.

I'm guessing here, but do you mean this problem is only happening in Opera? If so, then it is because of this line:

$('html, body').animate(...);

The problem is that Opera will animate first the html, then animate the body. I found an elegant solution here which essentially provides this bit of code:

var scrollElement = 'html, body';
$('html, body').each(function(){
  var initScrollTop = $(this).attr('scrollTop');
  $(this).attr('scrollTop', initScrollTop + 1);
  if ($(this).attr('scrollTop') === initScrollTop + 1) {
    scrollElement = this.nodeName.toLowerCase();
    $(this).attr('scrollTop', initScrollTop);
    return false;
  }
});
scrollEl = $(scrollElement);

// further down, when you animate
scrollEl.animate(...);