另一个解决方案是使用"offsetTop"，就像这样:

var elementPosition = document.getElementById('id').offsetTop;

window.scrollTo({
  top: elementPosition - 10, //add your necessary value
  behavior: "smooth"  //Smooth transition to roll
});

也许这有点笨拙，但到目前为止还不错。我在angular 9工作。

文件.ts

scroll(el: HTMLElement) {
  el.scrollIntoView({ block: 'start',  behavior: 'smooth' });   
}

. html文件

<button (click)="scroll(target)"></button>
<div  #target style="margin-top:-50px;padding-top: 50px;" ></div>

我用边距和填充顶部调整偏移量。

问候!

这是我的两分钱。

我也有scrollIntoView滚动过去元素一点的问题，所以我创建了一个脚本(本机javascript)，将一个元素前置到目的地，将它定位到顶部的css和滚动到那一个。滚动后，再次删除创建的元素。

HTML:

//anchor tag that appears multiple times on the page
<a href="#" class="anchors__link js-anchor" data-target="schedule">
    <div class="anchors__text">
        Scroll to the schedule
    </div>
</a>

//The node we want to scroll to, somewhere on the page
<div id="schedule">
    //html
</div>

Javascript文件:

(() => {
    'use strict';

    const anchors = document.querySelectorAll('.js-anchor');

    //if there are no anchors found, don't run the script
    if (!anchors || anchors.length <= 0) return;

    anchors.forEach(anchor => {
        //get the target from the data attribute
        const target = anchor.dataset.target;

        //search for the destination element to scroll to
        const destination = document.querySelector(`#${target}`);
        //if the destination element does not exist, don't run the rest of the code
        if (!destination) return;

        anchor.addEventListener('click', (e) => {
            e.preventDefault();
            //create a new element and add the `anchors__generated` class to it
            const generatedAnchor = document.createElement('div');
            generatedAnchor.classList.add('anchors__generated');

            //get the first child of the destination element, insert the generated element before it. (so the scrollIntoView function scrolls to the top of the element instead of the bottom)
            const firstChild = destination.firstChild;
            destination.insertBefore(generatedAnchor, firstChild);

            //finally fire the scrollIntoView function and make it animate "smoothly"
            generatedAnchor.scrollIntoView({
                behavior: "smooth",
                block: "start",
                inline: "start"
            });

            //remove the generated element after 1ms. We need the timeout so the scrollIntoView function has something to scroll to.
            setTimeout(() => {
                destination.removeChild(generatedAnchor);
            }, 1);
        })
    })
})();

CSS:

.anchors__generated {
    position: relative;
    top: -100px;
}

希望这能帮助到大家!

CSS滚动边距和滚动填充

你可能想看看新的CSS属性滚动填充和滚动边距。可以对滚动容器(在本例中为html)使用滚动填充，对容器内的元素使用滚动边距。

在你的例子中，你想为你想要滚动到视图中的元素添加scroll-margin-top，如下所示:

.example {
  scroll-margin-top: 10px;
}

这会影响scrollIntoView代码，如下所示:

const el = document.querySelector(".example");
el.scrollIntoView({block: "start", behavior: "smooth"});

这将导致视口滚动以使视口的上边界与元素的上边界对齐，但有10px的额外空间。换句话说，元素的这些属性被考虑在内:

padding-top border-top scroll-margin-top (而不是margin-top)

此外，如果html元素有滚动填充顶部设置，那么也会考虑这一点。

你可以分两步完成:

el.scrollIntoView(true);
window.scrollBy(0, -10); // Adjust scrolling with a negative value here

我有这个，它对我非常有效:

// add a smooth scroll to element
scroll(el) {
el.scrollIntoView({
  behavior: 'smooth',
  block: 'start'});

setTimeout(() => {
window.scrollBy(0, -40);
}, 500);}

希望能有所帮助。