💥导言

在写vue项目过程中，你是否遇到这样的场景

通过点击一个按钮，当前页面就会慢慢的跳转到页面的某个位置

如果你用锚链接去实现这个功能的话，你就会发现，当你点击这个锚链接时，它是刷的一下，跳转过去了，不是慢吞吞的滚过去

翻过了很多博客，发现了一个比较简单的方法---->scrollIntoView()

💥scrollIntoView()使用用法

1️⃣作用

让当前的元素滚动到浏览器窗口的可视区域（可视区域：眼镜可以看见的页面）

2️⃣参数

element 代表javascript获取其DOM对象

布尔值类型

element.scrollIntoView(true);    等同于   element.scrollIntoView(); 
element.scrollIntoView(false);

true元素的顶端将和其所在滚动的可视区域的最顶端对齐

(打个比方：你把一个人，从不可视的页面，移动到可视的页面，那这个人的头是抵着页面的最顶端的)

false元素的底部将和其所在滚动的可视区域的最底部对齐（）

(打个比方：你把一个人，从不可视的页面，移动到可视的页面，那这个人的脚是踩着页面的最低端的)

对象类型

element.scrollIntoView({
    //三个参数
    behavior: "instant",
    block: "end", 
    inline: "nearest"}
});   

hehavior 可选

定义动画过渡效果 参数： auto smooth 默认为：auto

---

block可选

定义垂直方向的对齐 参数：start ， center ，end ，nearest 默认为：start

---

inline可选

定义水平方向的对齐 参数：start ，center ，end ，nearest 默认为：nearest

3️⃣案例

如图，点击按钮，让不可视区域内的元素，移动到可视区域内

HMML部分

<div id="btn" @click="tapItem()">按钮<div/>
<div id="box">操作元素<div/>

JS部分

function tapItem(){
     var el = document.getElementById("box");
     el.scrollIntoView({ 
         block: "start",
         behavior: "smooth" 
      })
}