Javascript 将幻灯片动画添加到水平滚动系统

我编写了一个简单的水平滚动系统。在JSFIDLE，您可以找到我的工作示例：

我想要实现什么？
我使用以下命令滚动到容器子级：

document.getElementById(target_subpage_id).scrollIntoView(false);  

我无法将此选项用于打开动画，因为浏览器SAFARI不支持此选项

我的问题：
如何在JSFIDLE上向系统添加幻灯片动画？还是我必须重写力学

---

~提前感谢马库斯。

您可以使用css：

html {
  scroll-behavior: smooth;
}

但话说回来

不过还有其他方法。只需阅读本页即可获得精彩的概述：

---

就我个人而言，我不会使用javascript来实现这些。就像你当前的问题一样，url片段可以完成同样的事情，并且在任何地方都可以工作，比如如果你将第二个按钮更改为

a

锚定，使其成为

，并将css从

按钮更改为
a
，那么它看起来都一样，并且在没有js的情况下实现同样的目标。
// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth'
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});