Javascript 使页面滚动以将div置于顶部

我正在构建一个页面，其中有一些具有不同高度的div和其中的文本，我想，当我单击div的文本时，使页面移动，以便该div位于屏幕顶部

我四处搜索过，但我发现的内容通常与固定属性有关，问题是我不想更改div的position属性，我只希望页面自动滚动，以便div位于顶部

你对我从哪里开始有什么建议吗

多谢各位

.container{
宽度：100vw；
高度：自动；
}
.元素{
填充：50px；
}
#元素-1{
背景颜色：米色；
高度：500px；
}
#元素-2{
背景色：暗绿色；
高度：200px；
}
#元素-3{
背景颜色：珊瑚；
颜色：白色；
高度：800px；
}
#元素-4{
背景色：午夜蓝；
颜色：白色；
高度：300px；
}

一些文本
一些文本
一些文本
一些文本

您需要实现一个实现此功能的函数

window.scrollTo(x, 0); 

其中x是元素的位置。你可以通过使用

let x = element.getBoundingClientRect().top;

---

如果我正确理解你，这将帮助你

let divs=document.queryselectoral（“.element”）；
div.forEach（div=>{
div.addEventListener（“单击”，事件=>{
设divTop=div.offsetTop；
滚动到（0，divTop）；
log（divTop+“--”+window.scrollY）；
});
});
.container{
宽度：100vw；
高度：自动；
}
.元素{
填充：50px；
}
#元素-1{
背景颜色：米色；
高度：500px；
}
#元素-2{
背景色：暗绿色；
高度：200px；
}
#元素-3{
背景颜色：珊瑚；
颜色：白色；
高度：800px；
}
#元素-4{
背景色：午夜蓝；
颜色：白色；
高度：300px；
}

一些文本
一些文本
一些文本
一些文本