平滑滚动锚链接是一个常见的网页滚动效果，可以让页面在点击链接后平滑滚动到目标位置，而不是瞬间跳转过去。通常，我们使用jQuery来实现这个效果，但是有时候我们不想依赖于jQuery，希望用原生的JavaScript来实现。

在这段代码中，我们使用了从JavaScript animation中提取出来的一个函数，并对其进行了修改。这个函数可以用来修改元素的属性，而不仅仅是样式的属性。代码如下：

function animate(elem, style, unit, from, to, time, prop) {
  if (!elem) {
    return;
  }
  var start = new Date().getTime(),
    timer = setInterval(function() {
      var step = Math.min(1, (new Date().getTime() - start) / time);
      if (prop) {
        elem[style] = (from + step * (to - from)) + unit;
      } else {
        elem.style[style] = (from + step * (to - from)) + unit;
      }
      if (step === 1) {
        clearInterval(timer);
      }
    }, 25);
  if (prop) {
    elem[style] = from + unit;
  } else {
    elem.style[style] = from + unit;
  }
}

这段代码定义了一个`animate`函数，接受7个参数，分别是要动画的元素`elem`，要修改的属性`style`，单位`unit`，起始值`from`，目标值`to`，动画时间`time`，以及是否修改属性`prop`。函数通过定时器不断更新元素的属性值来实现动画效果。

在页面加载完成后，我们调用`animate`函数来实现平滑滚动效果。具体代码如下：

window.onload = function() {
  var target = document.getElementById("div5");
  animate(document.scrollingElement || document.documentElement, "scrollTop", "", 0, target.offsetTop, 2000, true);
};

这段代码首先获取了id为`div5`的元素作为目标元素，然后调用`animate`函数来实现平滑滚动效果。这里通过`document.scrollingElement`或`document.documentElement`来获取滚动元素，然后修改其`scrollTop`属性来实现滚动。

除此之外，我们还需要为目标元素设置一个高度，以便在滚动时能够看到效果。具体代码如下：

div {
  height: 50px;
}

最后，我们在页面中添加了一系列的`div`元素作为锚点，用来测试平滑滚动效果。

总结起来，这段代码通过原生的JavaScript实现了平滑滚动锚链接的效果。通过调用`animate`函数来修改滚动元素的`scrollTop`属性，从而实现平滑滚动效果。

原因：这篇文章介绍了一种使用纯JavaScript实现平滑滚动锚链接的方法。作者提供了一个使用代码演示平台CodePen的链接，展示了如何通过点击按钮实现平滑滚动到指定元素的效果。作者还指出在代码中使用了element.offsetTop来获取元素相对于文档顶部的偏移量，但在Safari浏览器中不起作用。而应该使用element.getBoundingClientRect().top + window.scrollY来获取准确的偏移量。

解决方法：作者提供了一个在原生Edge浏览器上工作的解决方法，即将element.offsetTop替换为element.getBoundingClientRect().top + window.scrollY。然而，对于IE浏览器，需要使用一个名为"smoothscroll"的polyfill（即兼容性插件），作者提供了一个在GitHub上的链接，该插件可以解决在IE浏览器上的兼容性问题。此外，作者在文章中提到不关心IE浏览器的兼容性，并质疑该方法是否适用于Safari浏览器。但现在Safari浏览器已经支持这种方法。

以下是整理后的

实际上，有一种更轻量级和简单的方法来实现平滑滚动锚链接：

https://codepen.io/ugg0t/pen/mqBBBY

JavaScript代码如下：

function scrollTo(element) {
  window.scroll({
    behavior: 'smooth',
    left: 0,
    top: element.offsetTop
  });
}
document.getElementById("button").addEventListener('click', () => {
  scrollTo(document.getElementById("8"));
});

CSS代码如下：

div {
  width: 100%;
  height: 200px;
  background-color: black;
}
div:nth-child(odd) {
  background-color: white;
}
button {
  position: absolute;
  left: 10px;
  top: 10px;
}

HTML代码如下：

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>
<div id="9"></div>
<div id="10"></div>
<button id="button">Button</button>

唯一的问题是，应该使用element.getBoundingClientRect().top + window.scrollY而不是element.offsetTop。这样在原生Edge浏览器上可以正常工作，但在IE浏览器中需要使用一个名为"smoothscroll"的polyfill，作者提供了一个在GitHub上的链接，该插件可以解决在IE浏览器上的兼容性问题。作者在文章中提到不关心IE浏览器的兼容性，并提出是否应该关心Safari浏览器的兼容性。但现在Safari浏览器已经支持这种方法。

这种方法与简单添加scroll-behavior: smooth的效果相同，在大多数现代浏览器中都能正常工作，但Safari浏览器尚未采用。现在Safari浏览器也支持这种方法。

Smooth scroll anchor links WITHOUT jQuery

在之前的回答中，我们定义了一个名为scrollTo的函数，可以在函数中传入要滚动到的元素。例如，如果有一个id为"footer"的div，可以在脚本中运行以下代码来滚动到该元素：

elmnt = document.getElementById("footer");
scrollTo(document.body, elmnt.offsetTop, 600);

这样就实现了无需使用jQuery的平滑滚动效果。你可以在浏览器的控制台中调试这段代码，并根据需要进行微调。

然而，在某些情况下，我们需要将`document.body`替换为`document.documentElement`才能使代码正常工作。在Edge浏览器中，我们需要使用`document.documentElement`。根据MDN文档和caniuse网站的支持情况，Edge浏览器从版本12开始支持`document.documentElement`。

参考链接：

- MDN文档：[developer.mozilla.org/en-US/docs/Web/API/Document/documentElement#browser_compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement#browser_compatibility)

- caniuse网站：[caniuse.com/?search=documentElement](https://caniuse.com/?search=documentElement)