jQuery滚动div与scrollTop
我试图向上或向下滚动div时,将鼠标悬停在各自的箭头上。我也希望能够在单击按钮时跳下div(想想点击窗口滚动箭头而不是拖动滚动条)。jQuery滚动div与scrollTop
的滚动的作品,但跳跃没有。 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()你可能会发现有用的做的正是这种类型的跳跃。
这就需要我在DIV的每个X像素中放置一个新元素,这样我就可以跳到它了。没有我期待的那样干净...... – papermate 2009-12-07 03:25:30
没有任何arguements的scrollTop的函数返回的偏移值。使用element.scrollTop(0)滚动到顶部。这是我在FF和IE8上运行的一个测试(但是那个是doesn't mean it will work in IE6)。我还更改了代码的某些部分,因为出于某种原因,您将悬停和点击事件绑定到了您想要在内容标签下找到的箭头(这不是您将它们附加到的位置),您将它们放在标签下与haccordion开放的类。此外,您提供的HTML使用haccordion类,而不是haccordion打开的类,如在JavaScript中。我改变了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>
这就是我想要做的。找到div当前滚动的位置(从悬停的滚动功能) - 也就是说,在div的一半。然后我想增加约100像素的分数。所以div现在会在半路+ 100像素。然后,你点击的越多,它跳过div的向下滚动。然而,scrollTop()不断地将偏移量重新调整为0.无论我向下滚动多少。 – papermate 2009-12-07 03:42:25
你能否粘贴一些删节的HTML,以便我可以玩和测试? – SimonDever 2009-12-07 03:44:42
http://slexy.org/view/s200KYx3jy papermate 2009-12-07 03:48:04
你尝试我的代码吗?它是如何为你工作的? – SimonDever 2009-12-09 04:38:02