0

将鼠标悬停在相应的箭头上时，我试图向上或向下滚动 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;">&#9660;</span><span class="arrow up" style="position: absolute; bottom: 5px; left: 280px; font-size: 9pt;">&#9650;</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;
}

我怎样才能让跳跃部分工作？

4

2 回答 2

0

我写了一篇关于scrollIntoView()的博客，你可能会发现它对进行这种类型的跳跃很有帮助。

于 2009-12-07T03:21:10.123 回答
0

没有任何争论，scrollTop 函数返回偏移值。使用 element.scrollTop(0) 滚动到顶部。这是我运行的一个测试，它在 FF 和 IE8 中运行良好（但这并不意味着它可以在 IE6 中运行）。我还更改了您的代码的某些部分，因为由于某种原因，您将悬停和单击事件绑定到您想要在内容标签下找到的箭头（这不是您将它们附加到的位置），您将它们放在标签下与手风琴公开课。此外，您提供的 HTML 使用了 haccordion 类，而不是 javascript 中的 haccordion-opened 类。我更改了 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;">&#9660;</span><span class="arrow up" style="position: absolute; bottom: 5px; left: 280px; font-size: 9pt;">&#9650;</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>
于 2009-12-07T03:40:28.343 回答