Javascript自动上下滚动，可随时取消

Question

I have a website with a button. When i press the button, i want the page (body) to auto-scroll up and down forever.

UNTIL i try to scroll the page myself, then the auto-scroll must stop IMMEDIATELY until restarted with the button.

I've found alot of posts on how to do auto-scroll - but not in this context, being able to stop it.

Any ideas?

Answer 1

hi you can inspire from this 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: all 1000ms;
}
.anitem.current-last{
    background: #99d;
}
#listofstuff {
    width:300px;
    height:300px;
    overflow:auto;
}