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;">&#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; 
}

我怎样才能跳的部分工作？

来源

2009-12-07 papermate

你尝试我的代码吗？它是如何为你工作的？ – SimonDever 2009-12-09 04:38:02

我的博客上讲述scrollIntoView()你可能会发现有用的做的正是这种类型的跳跃。

来源

2009-12-07 03:21:10

这就需要我在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;">&#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-07 03:40:28 SimonDever

这就是我想要做的。找到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

jQuery滚动div与scrollTop

回答

相关问题