如何使用vanilla JS在scroll上平滑滚动到div？

要使用vanilla JavaScript实现平滑滚动到特定div的功能，你可以使用scrollIntoView方法，并结合一些额外的配置来实现平滑效果。以下是一个基本的示例：

// 获取目标div元素
var targetDiv = document.getElementById('your-div-id');

// 使用scrollIntoView方法并设置behavior为'smooth'以实现平滑滚动
targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });

在这个例子中，your-div-id应该替换为你想要滚动到的div的ID。scrollIntoView方法的参数是一个对象，其中behavior: 'smooth'表示滚动行为应该是平滑的。block: 'start'和inline: 'nearest'是可选参数，用于指定滚动对齐的方式。

如果你想要在页面加载时就执行这个滚动动作，可以将上述代码放在window.onload事件中：

window.onload = function() {
    var targetDiv = document.getElementById('your-div-id');
    targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
};

如果你想要在用户点击某个按钮时触发滚动，可以将上述代码放在按钮的点击事件监听器中：

<button id="scroll-button">滚动到目标div</button>
<div id="your-div-id">这里是目标内容</div>

<script>
document.getElementById('scroll-button').addEventListener('click', function() {
    var targetDiv = document.getElementById('your-div-id');
    targetDiv.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
});
</script>

在这个例子中，当用户点击ID为scroll-button的按钮时，页面会平滑滚动到ID为your-div-id的div元素。

请注意，scrollIntoView方法的平滑滚动功能在所有现代浏览器中都得到了支持，但在一些较旧的浏览器版本中可能不可用。如果需要支持这些旧版本浏览器，你可能需要使用polyfill或者自定义的平滑滚动动画。

参考链接：