如何使用 scrollTop 或 scrollTo 滚动到 div 的顶部答案

【问题标题】：How to scroll to the top of a div using either scrollTop or scrollTo如何使用 scrollTop 或 scrollTo 滚动到 div 的顶部
【发布时间】：2020-05-24 18:47:38
【问题描述】：

我在一个页面上有 4 个模式。如果我打开一个滚动到底部，关闭它，然后重新打开它，它会将我放在我滚动到模式中最后的位置。每个模态都会发生这种情况，因此如果我滚动到第一个模态的底部，将其关闭然后打开第三个模态，它会将我置于模态的底部。

我正在尝试创建一个 javascript 函数，它将模式滚动到打开模式的元素的顶部 onclick。

任何想法都将不胜感激，因为我似乎无法在任何地方找到任何解决方案。

谢谢。

【问题讨论】：

欢迎来到 Stack Overflow！请访问help center，使用tour 了解内容和How to Ask。做一些研究，搜索关于 SO 的相关主题；如果您遇到困难，请发布您尝试的minimal reproducible example，并使用stack snippet 记录输入和预期输出。

标签： javascript html css

【解决方案1】：

使用元素的.scroll() 函数。 document.getElementById("element-id").scroll(0,0);

【讨论】：

【解决方案2】：

我希望这个例子对你有所帮助。在这个例子中，我们从顶部开始到下面的一个 div。然后我们回到顶部的另一个 div。

这很简单。获取 div id，然后使用 offsetTop 获取其在屏幕上的位置。然后将该值传递给 window.scroll 中的顶部选项。

var myDiv = document.getElementById("myDiv");
var myDiv2 = document.getElementById("myDiv2");

function scrollMe(){
  scrollToMyDiv(myDiv);
}
function scrollMe2(){
  scrollToMyDiv(myDiv);
}
function scrollToMyDiv(element) {
  window.scroll({
    top: element.offsetTop,
    left: 0,    
    behavior: 'smooth'
  });
}

<a href="#" onclick="scrollMe()">scroll now</a>

<div id="myDiv2">
    <p>div 2</p>
</div>
<div style="height:200vh;background-color:lime;"></div>

<div id="myDiv" style="background-color:red">
  <p><a onclick="scrollMe2()" href="#">scroll to div 2</a></p>
</div>

【讨论】：

感谢您的回复 Felipe，我确实理解这个示例，它很有帮助，谢谢，但我实际上是在尝试在特定 div 上使用 window.scrollTo 或 window.scrollBy 而不是窗口本身.你对如何做到这一点有任何想法吗？如果您不知道，请不要担心，感谢您迄今为止的帮助。
让我们试着理解。我有一个打开模式并滚动到它的末尾。关闭此模态时，我应该直接转到下一个模态的开头吗？会不会在模态div内部控制滚动？