Javascript 滚动回可滚动 div 的顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10744299/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll back to the top of scrollable div
提问by imhere
<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;
How to reset the scroll position back to top of container div the next time?
下次如何将滚动位置重置回容器 div 的顶部？
回答by Phrogz
回答by Mahmoud Ibrahim
Another way to do it with a smooth animation is like this
另一种使用平滑动画的方法是这样的
$("#containerDiv").animate({ scrollTop: 0 }, "fast");
回答by Sunnyside Productions
I tried the existing answers to this question, and none of them worked on Chrome for me. What did work was slightly different:
我尝试了这个问题的现有答案，但没有一个适合我在 Chrome 上工作。工作的内容略有不同：
$('body, html, #containerDiv').scrollTop(0);
回答by Gaurav Tiwari
scrollTo
滚动到
window.scrollTo(0, 0);
is the ultimate solution for scrolling the windows to the top - the best part is that it does not require any id selector and even if we use the IFRAME structure it will work extremely well.
是将窗口滚动到顶部的最终解决方案 - 最好的部分是它不需要任何 id 选择器，即使我们使用 IFRAME 结构，它也能很好地工作。
The scrollTo() method scrolls the document to the specified coordinates.
window.scrollTo(xpos, ypos);
xpos Number Required. The coordinate to scroll to, along the x-axis (horizontal), in pixels
ypos Number Required. The coordinate to scroll to, along the y-axis (vertical), in pixels
scrollTo() 方法将文档滚动到指定的坐标。
window.scrollTo(xpos, ypos);
xpos 号码 必填。沿 x 轴（水平）滚动到的坐标，以像素为单位
ypos Number 必需。沿 y 轴（垂直）滚动到的坐标，以像素为单位
jQuery
jQuery
Another option to do the same is using jQuery and it will give a smoother look for the same
做同样的另一个选择是使用 jQuery，它会给相同的外观更流畅
$('html,body').animate({scrollTop: 0}, 100);
where 0 after the scrollTop specifies the vertical scrollbar position in the pixel and second parameter is an optional parameter which shows the time in microseconds to complete the task.
其中 scrollTop 后面的 0 指定像素中的垂直滚动条位置，第二个参数是可选参数，显示完成任务的时间（以微秒为单位）。
回答by Rajat
This worked for me :
这对我有用：
document.getElementById('yourDivID').scrollIntoView();
回答by Fran?ois No?l
For those who still can't make this work, make sure that the overflowed element is displayed before using the jQuery function.
对于仍然无法完成这项工作的人，请确保在使用 jQuery 函数之前显示溢出的元素。
Exemple:
例子：
$('#elem').show();
$('#elem').scrollTop(0);
回答by Ashwin
If you want to scroll with a smooth transition, you could use this!
如果你想平滑过渡滚动，你可以使用这个！
(Vanilla JS)
（香草JS）
const tabScroll = document.getElementById("tabScroll");
window.scrollTo({
'behavior': 'smooth',
'left': 0,
'top': tabScroll.offsetTop - 80
});
If your target users are Chromeand Firefox, then this is good! But unfortunately this method isn't supported well enough on all browsers. Check Here
如果您的目标用户是Chrome和Firefox，那么这很好！但不幸的是，这种方法在所有浏览器上都没有得到足够的支持。 检查这里
Hope this helps!!
希望这可以帮助！！
回答by Irv Lennert
As per Fran?ois No?l's answer "For those who still can't make this work, make sure that the overflowed element is displayed before using the jQuery function."
根据 Fran?ois No?l 的回答“对于那些仍然无法完成这项工作的人，请确保在使用 jQuery 函数之前显示溢出的元素。”
I had been working in a bootstrap modal that I repeatedly bring up with account permissions in a div that overflows on the y dimension. My problem was, I was trying to use the jquery .scrollTop(0) function and it would not work no matter how I tried to do it. I had to setup an event for the modal that didn't reset the scrollbar until the modal had stopped animating. The code that finally worked for me is here:
我一直在使用引导模式工作，我在 y 维度上溢出的 div 中反复提出帐户权限。我的问题是，我试图使用 jquery .scrollTop(0) 函数，无论我如何尝试它都无法工作。我必须为模态设置一个事件，该事件在模态停止动画之前不会重置滚动条。最终对我有用的代码在这里：
$('#add-modal').on('shown.bs.modal', function (e) {
$('div.border').scrollTop(0);
});
回答by AlexTR
For me the scrollTop way did not work, but I found other:
对我来说， scrollTop 方式不起作用，但我发现了其他方式：
element.style.display = 'none';
setTimeout(function() { element.style.display = 'block' }, 100);
Did not check the minimum time for reliable css rendering though, 100ms might be overkill.
虽然没有检查可靠 css 渲染的最短时间，但 100 毫秒可能有点过头了。
回答by Ruben
If the html content overflow a single viewport, this worked for me using only javascript:
如果 html 内容溢出单个视口，这对我只使用 javascript 有用：
document.getElementsByTagName('body')[0].scrollTop = 0;
Regards,
问候，
