滚动回到div的顶部

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 Number必需.要沿y轴(垂直)滚动到的坐标,以像素为单位

jQuery的

另一个做同样的选择是使用jQuery,它会给出更平滑的外观

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

其中,在scrollTop之后的0指定像素中的垂直滚动条位置,第二个参数是一个可选参数,它显示完成任务的时间(以微秒为单位).

Answer 5

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

另见： https : .scrollIntoView() //developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

演示：

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
}

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;
}

Answer 6

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

例:

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

Answer 7

这对我有用:

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

Answer 8

当通过类名获取元素时，不要忘记返回值是一个数组；因此这段代码：

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

行不通。请改用下面的代码。

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

我想其他人可能会遇到和我类似的问题；所以这应该可以解决问题。

Answer 9

如果你想滚动平滑过渡，你可以使用这个！

\n\n

（原版 JS）

\n\n

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

\n\n

\n

如果您的目标用户是Chrome和Firefox，那么这很好！但不幸的是，所有浏览器都不能很好地支持此方法。 检查这里

\n

\n\n

希望这可以帮助！！

\n