jQuery scroll在div内时无法正常工作_Jquery_Class_Html_Scroll

jQuery scroll在div内时无法正常工作

jquery class html scroll

jQuery scroll在div内时无法正常工作,jquery,class,html,scroll,Jquery,Class,Html,Scroll,我创建了一个jQuery函数，该函数将类应用于段落，然后在单击按钮时滚动到该段落。当段落与文档相关时，它可以正常工作，但我希望滚动发生在div中。目前，滚动正在工作，并且它正确地应用了类，但它不能滚动到正确的段落。每次单击按钮时，它似乎都会滚动到一个随机的位置 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.

我创建了一个jQuery函数，该函数将类应用于段落，然后在单击按钮时滚动到该段落。当段落与文档相关时，它可以正常工作，但我希望滚动发生在div中。目前，滚动正在工作，并且它正确地应用了类，但它不能滚动到正确的段落。每次单击按钮时，它似乎都会滚动到一个随机的位置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
        $(function() {

                $('.down').click(function() {
                    $('.current + p').addClass('current');
                    if ($('p:last').hasClass('current')) {
                        $('p').removeClass('current');
                        $('p:last').addClass('current');
                        return false;                   
                    }
                    else {
                    $('.current:first').removeClass('current');
                    return false;
                    }
                });

                $('.up').click(function() {
                    $('.current').prev('p').addClass('current');
                    if ($('p:first').hasClass('current')) {
                        $('p').removeClass('current');
                        $('p:first').addClass('current');
                        return false;
                    }
                    else {
                    $('.current:last').removeClass('current');
                    return false;
                }
            });
            $('.down, .up').click(function() {
                $('.slider').animate({scrollTop: $(".current").offset().top},'slow');
            });
        });
</script>

<style type="text/css">
.slider {
position: relative;
background: #ccc;
overflow: scroll;
height: 100px;
}
.slider p {
position: relative;
}
.nav {
position: fixed;
left: 500px;
z-index: 10;
}

p {
height: 100px;
}
</style>

</head>

<body>

<div class="nav">
<a href="#" class="up">UP</a>
<a href="#" class="down">DOWN</a>
</div>

<br /><br />
<div class="slider">
<p class="current">This is the first paragraph</p>
<p>111111111111111111111111</p>
<p>222222222222222222222222</p>
<p>333333333333333333333333</p>
<p>44444444444444444444444444</p>
<p>This is the last paragraph</p>
</div>


</body>
</html>

为此：

$('html,body').animate({scrollTop: $(".current").offset().top},'slow');

适当使用“this”关键字可能会有所帮助。

适当使用“this”关键字可能会有所帮助

$('html,body').animate({scrollTop: $(".current").offset().top},'slow');