i wrote jquery plugin make div auto scroll,i used function setinterval make div stop while , keeps on scroll. here code
(function($){ "use strict"; function scrolltotop(obj,height,speed){ var ch=parseint($(obj).css("margin-top"))+29; $(obj).parent().find(".moving").remove(); $(obj).after($(obj).clone().addclass("copy")); $(obj).addclass("moving").removeclass("copy").animate({ "margin-top":-27 },speed); loop=setinterval(function(){ ch+=27; if(ch < height+27){ $(obj).animate({ "margin-top":-ch },speed,function(){ loop; }) }else{ clearinterval(loop); scrolltotop($(obj).next(".copy"),height,speed); } },4000) } $.fn.extend({ autoscroll: function(options) { var defaults = { speed: 1000, scroller : '#scroller', scroller_container : '#scroller_container' } var options = $.extend(defaults, options); var height=$(options.scroller).height(); var stop=stopscroll(); //console.log(height) scrolltotop(options.scroller,height,options.speed); }, }); }(jquery)); $("#list2").autoscroll({scroller:"#list2",scroller_container:"#container_2"}); it works well,but idont know how make div stop scroll after init plugin.
if understand problem want move div scroll line line waiting 4s until reach end.
i simplified scrolltotop function
function scrolltotop(obj,height,speed){ var ch = 0; var loop = setinterval(function(){ ch+=27; $('#container_2').animate({ scrolltop: ch }, speed); if(ch >= height){ console.log('out of loop'); clearinterval(loop); } },4000); } you can see working example here http://jsfiddle.net/jcw3y/ may can adapt code use in plugin.
(you're using "use strict". remember declare javascript variables always. var loop, var ch e.t.c)
to stop manually can save intervalid , call clearinterval when want. check example: http://jsfiddle.net/ccr4t/
and finally, example pure jquery. using animate , stop functions control all.
(function ($) { "use strict"; function scrolltotop($container, options) { $container.animate({ scrolltop: options.scrollerheight }, options.speed, function () { console.log('animation completed'); }); } $.fn.extend({ autoscroll: function (options) { var $me = this; var defaults = { speed: 1000, scroller_container: '#scroller_container', scroller: '#list2' } var options = $.extend(defaults, options); options.scrollerheight = $(options.scroller).height(); scrolltotop($me, options); }, }); }(jquery)); $("#container_2").autoscroll({ scroller: '#list2', speed: 10000 }); // stop scroll after 4 sec settimeout(function () { $('#container_2').stop(); alert('scroll manually stopped') }, 4000); working example: http://jsfiddle.net/c8ns8/
