Vue滚动到指定位置的多种方式

不知道为啥，我试了下，只有scrollIntoView生效，并且虽然是滚动了，但是滚动的位置不对，其他的都没生效。。。有空再研究下

2024年3月18日19:50:37
后续问题解决了，原来我之前id都设置在最外层的div上，导致滚动出现异常，后面换了个思路，id设置在div里面的一个小组件上，这样滚动到这个组件不就相当于整个div滚动出现了吗。问题就解决了，用.scrollIntoView()方法最方便

原文：https://blog.csdn.net/qq_34241004/article/details/118692837

方法一：锚点
//dom
<a href="#li50">跳到50</a>
 <ul class="ul" id="ul">
   <li v-for="(item, index) in new Array(100)" :key="index" :id="'li' + (index + 1)">
     {{ index + 1 }} 只羊
   </li>
 </ul>

//或者js
window.location.hash= '#li50';

方法二：scrollTop
//dom
<el-button type="primary" @click="link">跳到30</el-button>

//js
link() {
	let target = document.getElementById('li30');
    let parent = document.getElementById('ul');
	parent.scrollTop = target.offsetTop - parent.offsetTop;
},

方法三：scrollTo
link() {
    let target = document.getElementById('li30');
    let parent = document.getElementById('ul');
    // parent.scrollTop = target.offsetTop - parent.offsetTop;
    parent.scrollTo(0, target.offsetTop - parent.offsetTop);
},
this.$refs.ul.scrollTo(0, 300);

方法四：scrollIntoView
//顶部
document.getElementById('li60').scrollIntoView();
//底部
document.getElementById('li60').scrollIntoView(false);
//中间
document.getElementById('li60').scrollIntoView({ behavior: "smooth", block: 'center' });