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

需求：

当容器有滚动条时，有时需要将指定的内容自动滚动到可视区域。

---

方法一：锚点

锚点通过在元素上设置id，然后用a标签的href="#id"属性跳转到指定位置。
也可以通过js中 window.location.hash= ‘#id’ 或 window.location.href = ‘#id’ 来跳转。

	//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';

hash和href的区别：

• hash为锚链接，并不会跳转到新的链接，只会在当前链接里面改变锚链。
• href表示重定向，得到完整的url，页面跳转到新的页面。
  

---

方法二：scrollTop

先计算指定dom距离顶部的高度offsetTop，再设置父元素的滚动距离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;
    },

由于此处父元素距离顶部也有一定的高度，所以滚动距离需要先减去父元素的offsetTop，才是正确的滚动高度。

---

方法三：scrollTo

同scrollTop，只是换了种写法

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

也可以通过ref来指定dom

this.$refs.ul.scrollTo(0, 300);

---

方法四：scrollIntoView

简单粗暴，将指定元素滚动到可视区域顶部、底部或中间：

behavior 定义动画过渡效果：“auto”、 “smooth”

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

Element.scrollIntoView()：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView