Javascript 如何使平滑滚动效果，但滚动停止在指定的高度？

我知道如何对具有某些

类/id

的元素产生此滚动效果。我没有得到的是使

滚动

在该元素上方的

20px处停止。我见过使用
document.getElementById（）
实现此功能的示例。像这样：

function scrollToJustAbove(element, margin=20) {
  let dims = element.getBoundingClientRect();
  window.scrollTo(window.scrollX, dims.top - margin);
}

但是，在我的例子中，我还需要一个平滑的过渡（比如我在plnrk中的链接）。我怎么做

这是我的代码：


使用而不是
元素。scrollIntoView（）

scrollTo方法是多态的。除了您已经知道的参数之外，它还只需要一个对象（字典），您可以在其中指定滚动行为，如下所示：

<script>
 function scrollToJustAbove(element, margin=20) {
   let dims = element.getBoundingClientRect();
   window.scrollTo({
    top: dims.top - margin,
    behavior: 'smooth'
   });
 }

 setTimeout(() => {
   const classElement = document.getElementsByClassName("myclass");
   if(classElement.length > 0){
     scrollToJustAbove(classElement[0]);
   }
 }, 100);
</script>


函数滚动至正上方（元素，边距=20）{
设dims=element.getBoundingClientRect（）；
window.scrollTo({
顶部：dims.top-页边距，
行为：“平滑”
});
}
设置超时（（）=>{
const classElement=document.getElementsByClassName（“myclass”）；
如果（classElement.length>0）{
ScrollToJustUpper（类元素[0]）；
}
}, 100);

工作示例：
没有
滚动到上面（classElement[0]）工作？@Cat你可以试试我的实时代码：你的答案对我不适用
<script>
 function scrollToJustAbove(element, margin=20) {
   let dims = element.getBoundingClientRect();
   window.scrollTo({
    top: dims.top - margin,
    behavior: 'smooth'
   });
 }

 setTimeout(() => {
   const classElement = document.getElementsByClassName("myclass");
   if(classElement.length > 0){
     scrollToJustAbove(classElement[0]);
   }
 }, 100);
</script>