Question

<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的顶部？

Answer 1

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

请参阅scrollTop属性。

Answer 2

使用平滑动画执行此操作的另一种方法就是这样

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

Answer 3

我尝试了这个问题的现有答案，但没有一个能在我的Chrome上运行。工作有什么不同：

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

Answer 4

<强> 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指定像素中的垂直滚动条位置，第二个参数是一个可选参数，它显示完成任务的时间（以微秒为单位）。

Answer 5

对于那些仍然无法完成这项工作的人，请确保在使用jQuery函数之前显示溢出的元素。

例：

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

Answer 6

这对我有用：

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

Answer 7

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
}

DOCS： 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>

Answer 8

对我来说，scrollTop方法不起作用，但我找到了其他方法：

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

没有检查可靠的css渲染的最短时间，但是100ms可能是过度杀伤。

Answer 9

如果html内容溢出单个视口，这对我来说仅使用javascript：

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

此致

Answer 10

ID应该具有具有溢出css属性的相应div的ID。

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

Answer 11

如果您想以平滑过渡滚动，可以使用此功能！

（Vanilla JS）

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

如果您的目标用户 Chrome 且 Firefox ，那么就是这样好！但不幸的是，这种方法得不到足够的支持所有浏览器。 Check Here

希望这会有所帮助!!

Answer 12

根据FrançoisNoël的回答：“对于仍然无法完成这项工作的用户，请确保在使用jQuery函数之前显示溢出的元素。”

我一直在使用引导模式，在y维度上溢出的div中反复使用帐户权限。我的问题是，我正在尝试使用jquery .scrollTop（0）函数，无论我如何尝试都无法使用。我必须为模态设置一个事件，直到模态停止动画后才重置滚动条。最终对我有用的代码在这里：

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

Answer 13

这两个代码对我来说就像一个魅力这第一个将滚动到页面顶部，但是如果您要滚动到某个特定的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);

Answer 14

这是它对我有用的唯一方法，并且具有平滑的滚动过渡：

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

滚动回到div的顶部

14 个答案:

2020更新

演示：