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

回答

相關問題