一.解决方案
第一种方案:传统的锚点定位
但是这个方案有一个弊端,就是会影响url 的hash
<div id="anchor">跳到这里来</div>
//html中定义一个锚点,这里可以用name或者id,即锚点的目的地
<a href="#anchor">点击这</a>
//这是锚点的入口,点击这,锚点激活,href属性绑定你想跳到的位置的div盒子的id或者name
第二种方案:使用scrollIntoView方法进行定位到某一位置
不会影响影响url 的hash,
<div id="anchor">跳到这里来</div>
//还是需要先定义锚点的目的地
<span @click="jumpClick()">点击这</span>
//这是锚点的入口,绑定点击事件
jumpClick(){
document.querySelector('#anchor').scrollIntoView(true)
//如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐
//如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐
}
还可以配置参数定位的位置和动画效果
document.querySelector('#anchor').scrollIntoView({
behavior: "smooth",
// 定义动画过渡效果, "auto"或 "smooth" 之一。默认为 "auto"
block: "center",
// 定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"
inline: "nearest"
// 定义水平方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
})