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方法,实现页面灵活渲染。