jquery - Javascript auto-scroll up and down, cancel at any time -
i have website button. when press button, want page (body) auto-scroll , down forever.
until try scroll page myself, auto-scroll must stop until restarted button.
i've found alot of posts on how auto-scroll - not in context, being able stop it.
any ideas?
hi can inspire example link
<div id="listofstuff"> <div class="anitem"> <span class="itemname">item1</span> <span class="itemdescruption">aboutitem1</span> </div> <div class="anitem"> <span class="itemname">item2</span> <span class="itemdescruption">aboutitem2</span> </div> <div class="anitem"> <span class="itemname">item3</span> <span class="itemdescruption">aboutitem3</span> </div> <div class="anitem"> <span class="itemname">item4</span> <span class="itemdescruption">aboutitem5</span> </div> <div class="anitem"> <span class="itemname">item5</span> <span class="itemdescruption">aboutitem5</span> </div> </div>
and
$(document).ready(function() { var wrapper = $('#listofstuff'), element = wrapper.find('.anitem'), lastelement = wrapper.find('.anitem:last-child'), lastelementtop = lastelement.position().top, elementsheight = element.outerheight(), scrollamount = lastelementtop - 2 * elementsheight; $('#listofstuff').animate({ scrolltop: scrollamount }, 1000, function() { lastelement.addclass('current-last'); }); });
and
.anitem { height:58px; background:#eee; border-top: 1px solid #bbb; border-bottom: 1px solid #fff; padding:20px; color:000; font-family: helvetica,arial, verdana,sans-serif; -webkit-transition: 1000ms; } .anitem.current-last{ background: #99d; } #listofstuff { width:300px; height:300px; overflow:auto; }
Comments
Post a Comment