前端锚点,应用场景:写考试页面,点击左边题号,右边滑动到相应的题目

1.scrollIntoView() 简介:

 scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。页面(容器)可滚动时才有用

2.scrollIntoView(alignToTop)

alignToTop参数可选true或false,默认是true,展示在可视页面顶部,false,展示在底部。

3.项目的实际应用:分为html和js俩部分

1.html方面。给div加一个 id就可以。我的题目是v-for循环的,所以我的id用:id='item,id'

{{ item.question }}
(3分)
?
{{ val.title }}

2.js方面。用document.getElementById(id).scrollIntoView()

goQuestion(item) {
			const element = document.getElementById(item);
             if (element) {
               element.scrollIntoView();
             } else {
               console.error('Element not found:', '#' + item);
             } 
		}, 

这样就可以实现了

你可能感兴趣的:(前端)