171 
<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 の先頭に戻すにはどうすればよいですか?

4

15 に答える 15

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

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

于 2012-05-24T19:50:31.437 に答える
70

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

$("#containerDiv").animate({ scrollTop: 0 }, "fast");
于 2013-11-17T14:02:20.500 に答える
30

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

$('body, html, #containerDiv').scrollTop(0);
于 2014-12-18T22:17:26.003 に答える
9

2020年アップデート

.scroll()要素またはウィンドウを簡単にスクロールするために使用できます。スムーズなスクロール効果が組み込まれているため、基本的にコードはこれ以上単純ではありません。

標準プロパティ:

var options = {
    top:       0,        // Number of pixels along the Y axis to scroll the window or element
    left:      0,        // Number of pixels along the X axis to scroll the window or element.
    behavior:  'smooth'  // ('smooth'|'auto') - animate smoothly, or move in a single jump
}

ドキュメント: https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

関連項目: .scrollIntoView() https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

デモ：

document.getElementById('btn').addEventListener('click',function(){

  document.getElementById('container').scroll({top:0,behavior:'smooth'});
  
});
/*DEMO*/
#container{
  width:300px;
  max-height:300px;
  padding:1rem;
  margin-left:auto;
  margin-right:auto;
  background-color:#222;
  color:#ccc;
  text-align:justify;
  overflow-y:auto;
}
#btn{
  width:100%;
  margin-top:1rem;
}
<div id="container">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <button id="btn">Scroll to top</button>
</div>

于 2020-09-10T06:00:41.807 に答える
2

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

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

于 2020-05-22T06:01:11.453 に答える
2

これは、スムーズなスクロール遷移で、私にとってはうまくいった唯一の方法です:

  $('html, body').animate({
    scrollTop: $('#containerDiv').offset().top,
  }, 250);
于 2019-05-29T20:46:11.963 に答える
0

これらの 2 つのコードは、最初にページの上部にスクロールするのに必要な魅力のように機能しましたが、特定の div にスクロールしたい場合は、2 つ目の div を div id と共に使用します。

$('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);
于 2018-12-22T05:37:04.973 に答える