スクロール可能な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の上部にリセットするにはどうすればよいですか？

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

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

スムーズなアニメーションでそれを行う別の方法は次のとおりです

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

私はこの質問に対する既存の回答を試しましたが、どれも私のためにChromeで動作しませんでした。何が機能したかは少し異なりました：

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

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番目のパラメーターはオプションのパラメーターで、タスクを完了するまでの時間をマイクロ秒単位で示します。

これは私のために働きました：

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

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

例：

$('#elem').show();
$('#elem').scrollTop(0);

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

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

信頼性の高いCSSレンダリングの最小時間を確認しませんでしたが、100ミリ秒ではやり過ぎになる可能性があります。

スムーズなトランジションでスクロールしたい場合は、これを使用できます！

（バニラJS）

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

ターゲットユーザーがChromeとFirefoxの場合、これで十分です。しかし、残念ながら、この方法はすべてのブラウザーで十分にサポートされていません。 ここをチェック

お役に立てれば！！

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

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

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

HTMLコンテンツが単一のビューポートをオーバーフローする場合、これはJavaScriptのみを使用して私にとってはうまくいきました：

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

よろしく、

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

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

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

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

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

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

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

これらの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);

IDには、オーバーフローcssプロパティを持つ対応するdivのIDが必要です。

document.querySelector('#YOUR_OVERFLOWED_DIV').scrollTop = 0;