使用scrollIntoView实现页面平滑滚动到指定区域

使用锚点同样可以到达目的，但是缺少平滑效果，感觉很生硬

下面以vue为例子，使用ref获取当前节点，在当前节点上使用scrollIntoView方法，scrollIntoView方法有一个scrollIntoViewOptions对象，这个对象有三个属性：

behavior：它定义元素出现在可视区内过程的动画，有 auto 和 smooth 两种选择。
block：定义元素的垂直方向的对齐方式，有"start", "center", "end", 或 "nearest" 4 个选项，默认 start。
inline：定义元素水平对齐方式，有"start", "center", "end", 或 "nearest"4 个选项，默认"nearest"。

我们使用behavior中的smooth实现平滑效果，scrollIntoView({ behavior: 'smooth' })

<div ref="d1" style="width: 100vw;height: 56vw;" @click="go(1)"></div>
<div ref="d2" style="width: 100vw;height: 56vw;" @click="go(2)"></div>
<div ref="d3" style="width: 100vw;height: 56vw;" @click="go(3)"></div>

<script setup>
let isCount = ref(false);
const d1 = ref();
const d2 = ref();
const d3 = ref();
const go = (num)=>{
	switch (num){
		case 1:
			d1.value.scrollIntoView({ behavior: 'smooth' });
			break;
		case 2:
			d2.value.scrollIntoView({ behavior: 'smooth' });
            break;
		case 3:
			d3.value.scrollIntoView({ behavior: 'smooth' });
            break;
	}
}
</script>