jquery - jQuery Animate Div トップに戻る

Question

私はコンテンツを持つdivを持っています:

<div id="First">There are lots of content in here. Blah Blah Blah...</div>

のdivスタイル属性があるoverflow:auto;ため、コンテンツがオーバーフローした場合、スクロールバーが表示されます。コンテンツの最後にある div 内にボタンがあります。

div 内のコンテンツは深いスクロールを可能にする可能性があるため、とにかく、ボタンをクリックするとスクロールが div の上部に戻りますか?

score 50 · Accepted Answer

はい。scrollTopを使う

次のように、要素と値 0 を指定するだけです。

$('#id').scrollTop(0);

次のように、上に戻るスクロールをアニメーション化することもできます。

$('#id').animate({
   scrollTop: 0
}, 'slow');

score 5 · Accepted Answer

これには jQuery (または JavaScript) は必要ありません。

デモ

アンカー名を定義します。

<a name="top"></a>

そして、このアンカーへのリンクを下部に作成します。

<a href="#top">back to top</a>

score 1 · Accepted Answer

$('#yourbuttonid').click(function() {
    $('#First').scrollTop(0);//for vertical scroll
    $('#First').scrollLeft(0);//for horizontal scroll
});

score 1 · Accepted Answer

1

$('#scrollToTopButton').click(function(){
    $('#First').scrollTop(0);
});

于 2012-05-21T17:18:11.820 に答える

score 0 · Accepted Answer

オーバーキル!!! scrollTop や jquery を使用する...このような単純なタスクにはお勧めできません。代わりにアンカーを使用します。

<a name="pageTop"></a>
....
<a href="#pageTop">TOP</a>

それとも、やりたい/達成したいことがもっとありますか?