滚动回到可滚动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");

我尝试了该问题的现有答案，但没有一个对我有效。所做的工作略有不同：

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

scrollTo

window.scrollTo(0, 0);

是将窗口滚动到顶部的最终解决方案-最好的部分是它不需要任何id选择器，即使我们使用IFRAME结构，它也可以很好地工作。

scrollTo（）方法将文档滚动到指定的坐标。
window.scrollTo（xpos，ypos）;
xpos编号必需。沿x轴（水平）滚动到的坐标，以像素为单位
ypos Number必需。沿y轴（垂直）滚动到的坐标（以像素为单位）

jQuery的

做到这一点的另一个选择是使用jQuery，它将为相同的对象提供更平滑的外观

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

其中scrollTop之后的0指定像素中垂直滚动条的位置，第二个参数是可选参数，以毫秒为单位显示完成任务的时间。

这为我工作：

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

对于仍然无法执行此操作的用户，请确保在使用jQuery函数之前显示了溢出的元素。

范例：

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

对我来说，scrollTop方法不起作用，但是我发现了其他方法：

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

虽然没有检查最小时间以进行可靠的CSS渲染，但是100ms可能会过大。

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

（香草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

我认为其他人可能会遇到和我类似的问题。因此，这应该可以解决问题。

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

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

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