Question

Still somewhat new at jQuery, I am using the following to automatically scroll a div with the class name of .scroller when the page loads.

$(".scroller").delay(2000).animate({ scrollTop: $('.scroller')[0].scrollHeight}, 50000);

However I would like to stop any scrolling upon hover over that div and start it back when hovering out.

Any thoughts on how to achieve this or should I be using something other than scrollTop for this?

Thanks,
Chris

Answer 1

To stop the animation under condition, you can use : $(".scroller").stop()

Then, restart the scrolling as you did without the delay.

http://api.jquery.com/stop/

$("#myDiv").hover(
    function(){
        $(".scroller").stop();
    },
    function(){
        $(".scroller").animate({ scrollTop: $('.scroller')[0].scrollHeight}, 50000);
    }
);