スクロールバーの代わりに、スクロールエリアのボタンでジャンプするためのjQuery

Question

サムネイルを含む幅と高さが設定されたdivがあります。 divはoverflow：autoに設定され、サムネイルをさらに表示するためにユーザーが下にスクロールできるようにします。

スクロールバーの代わりに使用できるjQueryプラグイン（またはメソッド）を探しています。ボタンを押すと、サムネイルの次のセットにアニメート（またはアニメーション化）されません。キーボードの「ページダウン」のようなもの。

私は検索したが、役に立たなかった。私はそのようなプラグインが存在するならば、私は適切なキーワードで検索していないと思う。

誰かが助けてくれることを願っています！ありがとう。

Answer 1

これは私の方法であり、私は

jQueryの

でスクロールimplementd方法Javascript

$(document).ready(function(){ 
    $('a.scroll').click(function() 
    { 
     //$(this).attr('scrollTo') is ID of element where to scroll 
     var target_offset = $("#"+$(this).attr('scrollTo')).offset(); 
     var target_top = target_offset.top-20; 

     $('html, body').animate({scrollTop:target_top}, 500); 

     return false; 
    }); 
}); 

あなたのリンクは、あなたがする必要がどのようなこの

<a scrollTo="id_where_to_scroll" href="#" title="Down" class="scroll">Down</a> 

のようになります。最初のセットのidが#firstSetが第2 1 #secondSetを作成し、ときに、リンクの場合は、押している間だけscrollToを変更でattr（ 'scrollTo'、 'yournextset'）;をクリックするだけでクリックされます。

Answer 2

.scrollToがあります：

$('div').scrollTo($('img:eq(10)')); 

11日<img>要素が見えるようになりますように、これはdiv要素をスクロールします。あなたはそれをあなたの好きにまで拡張することができます。

var $div = $('div'); 
$div.scrollTop($div.scrollTop() + $div.height()); 

これは、現在のポイント（ページダウンなど）で表示されない高さまでスクロールします。

http://jsfiddle.net/bqaQT/

Answer 3

必要はありませんプラグイン：

var thumbDiv = $('#thumbDiv'); 
thumbDiv.scrollBy(0, thumbDiv.height()); 

他の方向はちょうど負の高さになります：

thumbDiv.scrollBy(0, -thumbDiv.height()); 

Answer 4

overflow:hiddenにスクロールバーを削除し、.animate()メソッドを使用してscrollTopプロパティをアニメーション化するだけです。

スクロールダウン

$('#gallery').animate({scrollTop: '+=100' }, 500); 

スクロールアップ

$('#gallery').animate({scrollTop: '-=100' }, 500); 

デモ私が使用して類似した何かをしたhttp://jsfiddle.net/gaby/dAW5w/3/

Answer 5

で：。 $（ '＃のmyLinkを'）（ホバーfunction（）{ $（ "＃myDiv"）。stop（）。animate（{top ：（$（ "＃myDiv"）。position（）。top-200）+ 'px'}、{queue：false、duration：400}）;

}）;