How to scroll the div content using jquery or javascript?

Question

I want to scroll the div, containing the text, to the top when I mouseover the up arrow and stop when the mouse leaves the focus. Same for the down arrow. I tried using jquery but it fails.

please visit: http://jsfiddle.net/shantanubhaware/38WMF/12/

Here is Html code

<div class="container">
    <div class="news event">
        <div class="up arrow nav"></div>
        <div class="down arrow nav"></div>
        <p class="content items"> <span class="p">text1
            <br/>
            <br/>
            <br/><br/>
            <br/><br/>
            <br/><br/><br/><br/><br/>
            text2
            <br/>
            <br/>
            <br/><br/>
            <br/><br/>
            <br/><br/><br/><br/><br/>
            text3
            <br/>
            <br/>
            <br/><br/>
            <br/><br/>
            <br/><br/><br/><br/><br/>
                text4</span>

        </p>
    </div>
</div>

I use the following jquery

$('.up').mouseover(function () {
    scrollToTop();
});
$('.down').mouseover(function () {
    scrollToBottom();
});

function scrollToTop() {

    var cur = $('.content').scrollTop();
    while (cur > 0) {
        cur = parseInt(cur) - 50;
        $('.content').animate({
            scrollTop: cur
        }, 800);
    }
}

function scrollToBottom() {

    var cur = $('.content').scrollTop();
    var height = $('.p').height();
    while (cur < height) {
        cur = parseInt(cur) + 50;
        $('.content').animate({
            scrollTop: cur
        }, 800);
    }

}

tell me if i am wrong anywhere or if i want to use any other technique. Thanks for your support.

Answer 1

you need to stop the ongoing animation before starting a new one, otherwise it will finish the ongoing animation first and only then will start the new one.

its done by calling .stop() first.

also you forgot to bind on mouse leave events.

heres yours fixed fiddle:

http://jsfiddle.net/TheBanana/38WMF/14/