用绝对法定位锚

另一种方法是将锚定位在页面上想要的位置，而不是依赖于按偏移量滚动。我发现它可以更好地控制每个元素(例如。如果你想对某些元素有不同的偏移量)，并且可能对浏览器API的变化/差异更有抵抗力。

<div id="title-element" style="position: relative;">
  <div id="anchor-name" style="position: absolute; top: -100px; left: 0"></div>
</div>

现在相对于元素的偏移量被指定为-100px。创建一个函数来创建这个锚，以便代码重用，或者如果你正在使用一个现代的JS框架，比如React，通过创建一个渲染锚的组件来实现，并传入锚的名称和每个元素的对齐方式，这些元素可能相同，也可能不相同。

然后使用:

const element = document.getElementById('anchor-name')
element.scrollIntoView({ behavior: 'smooth', block: 'start' });

平滑滚动，偏移量为100px。

我添加这些css技巧给那些没有解决这个问题的解决方案:

#myDiv::before {
  display: block;
  content: " ";
  margin-top: -90px; // adjust this with your header height
  height: 90px; // adjust this with your header height
  visibility: hidden;
}

20秒内搞定:

这个解属于@ arsenie - ii，我只是把它简化成一个函数。

function _scrollTo(selector, yOffset = 0){
  const el = document.querySelector(selector);
  const y = el.getBoundingClientRect().top + window.pageYOffset + yOffset;

  window.scrollTo({top: y, behavior: 'smooth'});
}

使用方法(您可以在StackOverflow中打开控制台并进行测试):

_scrollTo('#question-header', 0);

我目前正在生产中使用它，它工作得很好。

UPD:我已经创建了一个npm包，它比下面的解决方案更好，更容易使用。

我的smoothScroll函数

我采用了Steve Banton的出色解决方案，并编写了一个函数，使其使用起来更方便。使用window.scroll()甚至window.scrollBy()会更容易，因为我以前尝试过，但这两个有一些问题:

一切都变成垃圾后，使用他们与平稳的行为。 你无论如何都不能阻止他们，必须等到卷轴的结尾。 希望我的函数对你们有用。此外，还有一个轻量级的填充程序，可以在Safari甚至IE中运行。

下面是代码

照搬就行，想怎么搞就怎么搞。

import smoothscroll from 'smoothscroll-polyfill';

smoothscroll.polyfill();

const prepareSmoothScroll = linkEl => {
  const EXTRA_OFFSET = 0;

  const destinationEl = document.getElementById(linkEl.dataset.smoothScrollTo);
  const blockOption = linkEl.dataset.smoothScrollBlock || 'start';

  if ((blockOption === 'start' || blockOption === 'end') && EXTRA_OFFSET) {
    const anchorEl = document.createElement('div');

    destinationEl.setAttribute('style', 'position: relative;');
    anchorEl.setAttribute('style', `position: absolute; top: -${EXTRA_OFFSET}px; left: 0;`);

    destinationEl.appendChild(anchorEl);

    linkEl.addEventListener('click', () => {
      anchorEl.scrollIntoView({
        block: blockOption,
        behavior: 'smooth',
      });
    });
  }

  if (blockOption === 'center' || !EXTRA_OFFSET) {
    linkEl.addEventListener('click', () => {
      destinationEl.scrollIntoView({
        block: blockOption,
        behavior: 'smooth',
      });
    });
  }
};

export const activateSmoothScroll = () => {
  const linkEls = [...document.querySelectorAll('[data-smooth-scroll-to]')];

  linkEls.forEach(linkEl => prepareSmoothScroll(linkEl));
};

要创建一个link元素，只需添加以下data属性:

data-smooth-scroll-to="element-id"

还可以将另一个属性设置为加法

data-smooth-scroll-block="center"

它表示scrollIntoView()函数的块选项。默认为start。在MDN上阅读更多。

最后

根据您的需要调整平滑滚动功能。

例如，如果你有一些固定的标题(或者我用单词masthead来称呼它)，你可以这样做:

const mastheadEl = document.querySelector(someMastheadSelector);

// and add it's height to the EXTRA_OFFSET variable

const EXTRA_OFFSET = mastheadEl.offsetHeight - 3;

如果你没有这样的情况，那就删除它，为什么不:-D。

你也可以使用element.scrollIntoView()选项

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

大多数浏览器都支持

也许这有点笨拙，但到目前为止还不错。我在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>

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

问候!