web-dev-qa-db-ja.com

divの一番上までスクロールします

<div id="containerDiv"></div>

#containerDiv {
  position: absolute;
  top: 0px;
  width: 400px;
  height: 100%;
  padding: 5px;
  font-size: .875em;
  overflow-y: scroll;
}

document.getElementById("containerDiv").innerHTML = variableLongText;

次回スクロール位置をコンテナdivの先頭にリセットするにはどうすればよいですか？

javascripthtmlscroll
88
imhere
var myDiv = document.getElementById('containerDiv');
myDiv.innerHTML = variableLongText;
myDiv.scrollTop = 0;

scrollTop 属性を参照してください。

154
Phrogz

スムーズなアニメーションでそれを行う別の方法は、このようなものです

$("#containerDiv").animate({ scrollTop: 0 }, "fast");
58
Mahmoud Ibrahim

この質問に対する既存の回答を試しましたが、私にとってChromeに取り組んだものはありませんでした。動作したものはわずかに異なっていました：

$('body, html, #containerDiv').scrollTop(0);
23
Sunnyside Productions

scrollTo

window.scrollTo(0, 0);

ウィンドウを一番上にスクロールするための究極のソリューションです。最良の部分は、IDセレクタを必要とせず、IFRAME構造を使用しても非常にうまく機能することです。

ScrollTo（）メソッドは、ドキュメントを指定された座標までスクロールします。
window.scrollTo（xpos、ypos）;
xpos番号が必要です。 x軸（水平）に沿った、スクロールする座標（ピクセル単位）
ypos番号が必要です。 y軸（垂直）に沿った、スクロールする座標（ピクセル単位）

jQuery

同じことを行う別のオプションは、jQueryを使用することです。これにより、同じものをよりスムーズに表示できます

$('html,body').animate({scrollTop: 0}, 100);

scrollTopの後の0はピクセル内の垂直スクロールバーの位置を指定し、2番目のパラメーターはオプションのパラメーターで、タスクを完了するまでの時間をマイクロ秒で示します。

17
Gaurav Tiwari

それでもこの作業を行えない場合は、jQuery関数を使用する前にオーバーフローした要素が表示されるであることを確認してください。

例：

$('#elem').show();
$('#elem').scrollTop(0);
8
François Noël

これは私のために働いた：

document.getElementById('yourDivID').scrollIntoView();
6
Rajat

私にとってscrollTopの方法は機能しませんでしたが、私は他のものを見つけました：

element.style.display = 'none';
setTimeout(function() { element.style.display = 'block' }, 100);

ただし、信頼性の高いcssレンダリングの最小時間を確認しなかったため、100ミリ秒は過剰である可能性があります。

2
AlexTR

HTMLコンテンツが単一のビューポートをオーバーフローする場合、これはjavascriptのみを使用して機能しました。

document.getElementsByTagName('body')[0].scrollTop = 0;

よろしく、

1
Ruben

スムーズな移行でスクロールしたい場合、これを使用できます！

（バニラJS）

const tabScroll = document.getElementById("tabScroll");
window.scrollTo({
  'behavior': 'smooth',
  'left': 0,
  'top': tabScroll.offsetTop - 80
});

ターゲットユーザーがChromeおよびFirefoxの場合、これは良いことです！ただし、残念ながら、この方法はすべてのブラウザで十分にサポートされているわけではありません。 ここをチェック

お役に立てれば！！

0
Ashwin

これは私にとってそれが唯一の方法で、スムーズなスクロール遷移があります：

  $('html, body').animate({
    scrollTop: $('#containerDiv').offset().top,
  }, 250);
0
Fred K

クラス名で要素を取得する場合、戻り値が配列であることを忘れないでください。したがって、このコード：

document.getElementByClassName("dropdown-menu").scrollTop = 0

動作しません。代わりに以下のコードを使用してください。

document.getElementByClassName("dropdown-menu")[0].scrollTop = 0

他の人が私と同じような問題に遭遇するかもしれないと思った。これでうまくいくはずです。

0
Mahsan Nourani

FrançoisNoëlの回答によると、「この機能をまだ実行できない場合は、jQuery関数を使用する前に、オーバーフローした要素が表示されていることを確認してください。」

私はbootstrapモーダルで作業しており、yディメンションでオーバーフローするdivでアカウントのアクセス許可を繰り返し表示していました。私の問題は、jquery .scrollTop（0）関数を使用しようとしていたため、どのように実行しようとしても機能しないことでした。モーダルのアニメーションを停止するまでスクロールバーをリセットしないモーダルのイベントを設定する必要がありました。最終的に私のために働いたコードはここにあります：

    $('#add-modal').on('shown.bs.modal', function (e) {
        $('div.border').scrollTop(0);
    });
0
Irv Lennert

これらの2つのコードは私にとって魅力的なものでしたが、最初にページの上部にスクロールするのにかかりますが、特定のdivにスクロールする場合は、div IDを持つ2番目のコードを使用します。

$('body, html, #containerDiv').scrollTop(0);
document.getElementById('yourDivID').scrollIntoView();

クラス名でスクロールするには、次のコードを使用します

var $container = $("html,body");
var $scrollTo = $('.main-content');

$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);
0
Amir shah