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

htt2321

已于 2023-12-20 09:40:07 修改

阅读量123

点赞数

文章标签：前端

于 2023-11-23 10:05:21 首次发布

本文链接：https://blog.csdn.net/weixin_43204464/article/details/134570186

版权

1.scrollIntoView() 简介：

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

2.scrollIntoView(alignToTop)

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

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

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

<div style="margin-left:30px;flex: 1;padding-right: 20px; overflow-y: auto; max-height: 600px;">
					<div>
						<div v-for="item in singleChoice" :key="item.id" style="margin:10px 0;" :id="item.id">
							<div style="display: flex;justify-content: space-between;">
								<div style=" word-wrap:break-word;text-align:left;width:650px">{{ item.question }}</div>
								<div>(3分)</div>
								<div style="margin-left:50px" :class="item.isDoubt? 'isDoubtQuestion' : 'doubtQuestion'" @click="doubtQuestion(item)">?</div>
							</div>
							<div class="radioGroup">
								<el-radio v-for="val in item.option" :key="val.id" style="margin:10px 0;"
									v-model="item.selectedOption" :label="val.id" @input="changeRadio(item)">{{ val.title }}
								</el-radio>
							</div>
						</div>
					</div>
				</div>

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

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

这样就可以实现了