当我将鼠标悬停在相应的箭头上时，我试图向上或向下滚动一个div。我还希望能够在单击按钮时跳过div（想想单击窗口滚动箭头而不是拖动滚动条）。
滚动有效，但跳跃没有。 scrollTop（）保持重新调整0。
这是代码：
function startScrollContent()
{
if ($('.haccordion-opened').prev('.header').find('div').attr('title') != 'dontscroll' && $('.haccordion-opened span.arrow').length == 0)
{
$('.haccordion-opened').append('<span class="arrow down" style="position: absolute; bottom: 5px; left: 260px; font-size: 9pt;">▼</span><span class="arrow up" style="position: absolute; bottom: 5px; left: 280px; font-size: 9pt;">▲</span>');
$('.content span.arrow').hover(function()
{
direction = ($(this).hasClass('up')) ? '-=' : '+=';
$('.content .padding').animate({scrollTop: direction + $('.content .padding').css('height')}, 5000);
}, function()
{
$('.content .padding').stop();
});
$('.content span.arrow').click(function()
{
$('.content .padding').stop();
direction = ($(this).hasClass('up')) ? '-' : '+';
alert($('.content .padding').scrollTop());
//$('.content .padding').scrollTop($('.content .padding').scrollTop + direction + 100);
});
}
return;
}
如何让跳跃部分工作？
我在博客上发表了关于scrollIntoView()的文章，你可能会觉得这种跳跃很有帮助。
没有任何争论，scrollTop函数返回偏移值。使用element.scrollTop（0）滚动到顶部。这是我运行的测试，在FF和IE8（但doesn't mean it will work in IE6）中运行正常。我还更改了代码的某些部分，因为出于某种原因，您将悬停和点击事件绑定到您想要在内容标记下找到的箭头（这不是您将其附加到的位置），您将它们放在标记下用haccordion打开的课程。此外，您提供的HTML使用了haccordion类，而不是javascript中使用haccordion打开的类。我改变了HTML以适应。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
if ($('.haccordion-opened').prev('.header').find('div').attr('title') != 'dontscroll' && $('.haccordion-opened span.arrow').length == 0)
{
$('.haccordion-opened').append('<span class="arrow down" style="position: absolute; bottom: 5px; left: 260px; font-size: 9pt;">▼</span><span class="arrow up" style="position: absolute; bottom: 5px; left: 280px; font-size: 9pt;">▲</span>');
$('.haccordion-opened span.arrow').hover(function()
{
direction = ($(this).hasClass('up')) ? '-=' : '+=';
$('.content .padding').animate({scrollTop: direction + $('.content .padding').css('height')}, 5000);
}, function()
{
$('.content .padding').stop();
});
$('.haccordion-opened span.arrow').click(function()
{
$('.content .padding').stop();
direction = ($(this).hasClass('up')) ? '-=' : '+=';
$('.content .padding').animate({scrollTop: direction + 100}, 0);
});
}
});
</script>
</head>
<body>
<div class="haccordion-opened">
<div class="header">
<div title="blah"></div>
</div>
<div class="content">
<div class="padding" style="height: 400px; overflow: hidden">
<h4>Blah...</h4>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
<p><br /><br /><br /><br /><br />test</p>
</div>
</div>
</div>
</body>
</html>