带有 scrollTop 的 jQuery 滚动 div答案

【问题标题】：jQuery scroll div with scrollTop带有 scrollTop 的 jQuery 滚动 div
【发布时间】：2010-12-23 21:04:20
【问题描述】：

当悬停在相应的箭头上时，我试图向上或向下滚动 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;
}

如何让跳转部分正常工作？

【问题讨论】：

你试过我的代码了吗？它对你有什么作用？

标签： jquery html scroll scrolltop

【解决方案1】：

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

【讨论】：

这需要我在 DIV 中每隔 X 像素放置一个新元素，以便我可以跳转到它。不像我希望的那样干净......

【解决方案2】：

没有任何争论，scrollTop 函数返回偏移值。使用 element.scrollTop(0) 滚动到顶部。这是我运行的一个测试，它在 FF 和 IE8 中运行良好（但 doesn't mean it will work in 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>

【讨论】：

这就是我想要做的。查找 div 当前滚动到的位置（从悬停滚动功能） - 可以说，在 div 的一半处。然后我想将该 scoll 增加约 100 像素。所以现在的 div 将是一半 + 100 像素。然后你点击得越多，它跳得越远 div 的滚动向下。然而，scrollTop() 不断将偏移量重新调整为 0。无论我向下滚动多远。
你能粘贴一些简短的 HTML 以便我玩和测试吗？
你在测试什么......因为我只是在阅读一些关于 IE6 无法使用 jQuery 很好地处理多个类元素的内容。
哦，是的，我将 startScrollContent() 名称更改为仅在文档准备功能下，用于我的测试目的。