基于Vue+TS，使用scrollIntoView()实现锚点定位

1、获取需要定位的元素的DOM，可以使用querySelectorAll（根据元素类型或者id获取）或使用ref获取元素DOM，注意：使用ref获取DOM，命名必须是唯一的，就算取相同的名字，最后也只能拿到一个DOM。

 //模板内容
//需要跳转的元素
<span id="buttton">buntton</span>
<div id="ref_pdf_view" ref="ref_pdf_view">马上就轮到我展示了1</div>
<div id="ref_pdf_view" ref="ref_pdf_view">马上就轮到我展示了2</div>
<div id="ref_pdf_view" ref="ref_pdf_view">马上就轮到我展示了3</div>

//TS 代码
//第一种获取方法(此时获取到所有id为ref_pdf_view的DOM元素)
const dom = document.querySelectorAll('#ref_pdf_view');
(dom[2] as Element).scrollIntoView({
        behavior: 'smooth', // 平滑过渡
        block: 'start', // 上边框与视窗顶部平齐。默认值
      });

//第二种获取方法（只能获取到一个DOM元素）
(this.$refs.ref_pdf_view as Element).scrollIntoView({
        behavior: 'smooth', // 平滑过渡
         block: 'start', // 上边框与视窗顶部平齐。默认值
      });

2、注册点击事件，点击按钮1，实现内容1呈现的效果

 const button = document.getElementById('#button');
 const dom = document.querySelectorAll('#ref_pdf_view');
 button.onclick = function () {
    (dom[2] as Element).scrollIntoView({
        behavior: 'smooth', // 平滑过渡
        block: 'start', // 上边框与视窗顶部平齐。默认值
    });
 };

如果出现如下报错：

说明没有拿到DOM元素，调用scrollIntoView 方法失败，或是拿到了DOM元素但是将DOM元素的类型判断错误。如：你以为拿到的是DOM数组，即所有类型名相同的元素，所以在定位时使用索引确定DOM，进而调用scrollIntoView();但实际上，JS拿到的只是单个DOM，所以方法调用就会失败。

另外，使用querySelector()获取DOM实现锚点定位，更适合定位元素个数不确定的情况，可以结合map方法，实现页面灵活渲染。