2012-03-23 13 views
1

オーバーフローでdivをスクロールする最も良い方法は何ですか:アンカーをクリックすると特定のピクセルまたは特定の割合で自動表示されますか? HTMLは非常に簡単です:私は上記のアンカーをクリックすると、私はのPIXの一定量を超えることのdivをスクロールしたいアンカーがクリックされたときにdivをスクロールする

<style> 
#container{ 
height:250px; 
overflow:auto; 
</style> 

<div id="container"> 
<p>Lots of Content</p> 
</div> 

<a href="#" id="scrolldiv">Scroll Down</a> 

、30pxは言います。私はjQueryがこれを簡単にする何かを持っていることを期待しています。私はそれがこのために最短の構文を持って信じ

$('#scrolldiv').click(function(){ 
    $('#container').animate({scrollTop: '+=30'}); 
}); 

をし、それが良さそうに見えます:

答えて

1

その目的のために、私はjQuery's animateを使用します。

jsFiddle example

+0

ありがとう、私はこれが最もクリーンであり、一番いいと思うことに同意します! –

+2

あなたはまだあなたのコールバックにイベントを渡し、preventDefault()を呼び出す必要があります。 – Hacknightly

+0

ありがとう@hackNightly、私はこれを含めることを確認します。 –

6
$('#scrolldiv').click(function(e){ 
    var current = $('#container').scrollTop(); 
    $('#container').scrollTop(current + 30); 
    e.preventDefault(); 
});​ 

jsFiddle

+2

それはまた、あなたがオーバーフロー使用することができ '.scrollTop()」 –

+0

です:#containerのdiv要素にはスクロールバーが存在しないように隠された(自動またはオーバーフロー-Y:隠された、オーバーフロー-X)を。そして、$( "#scrolldiv")を好むlive( 'click'、function(){...}); $( "#scrolldiv")。on( 'click'、function(){...}); [1.7.x]それが良いからです。 – Panagiotis

+1

@Panagiotis '.live()'は確かに「良い」わけではありません。 A)それは腐敗しているB)まったく異なる仕事をしている。 '.live()'は、要素自体の代わりに 'document'にバインドすることによってイベントを委譲します。これはほとんどの場合、悪い考えです([jquery docs](http://api.jquery.com/on/)から) ): "大量のドキュメントで委任されたイベントに対しては、ドキュメントやドキュメントの過度の使用を避けてください。") – Sinetheta

関連する問題