如何使用jquery或javascript滚动div内容？

Question

当我将鼠标悬停在向上箭头上时，我想将包含文本的div滚动到顶部，并在鼠标离开焦点时停止。 向下箭头相同。 我尝试使用jquery，但失败。

请访问： http : //jsfiddle.net/shantanubhaware/38WMF/12/

这是HTML代码

<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>

我用下面的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);
    }

}

告诉我是否在任何地方出错，或者是否要使用其他任何技术。 谢谢你的支持。

Answer 1

您需要先停止正在进行的动画，然后再开始制作新的动画，否则它将先完成正在进行的动画， 然后再开始制作新的动画。

首先调用.stop()完成。

您也忘记绑定鼠标离开事件。

这是你的固定小提琴：

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