vue跳转页面滚动到指定位置--瞄点
vue跳转页面滚动到指定位置--瞄点scrollIntoView()scrollIntoView()<!-- moreContent --><div class="xinya-conten-item"><router-linktag="div"class="moreContent":to="{ name: 'videoDetail', params: { id: li
·
vue跳转页面滚动到指定位置--瞄点
scrollIntoView()
原理:
①跳转到②,①为router-link/a标签;②为div标签
给①绑定对应跳转到的②设定好的id值,在②页面加载完成时通过scrollIntoView进行跳转
router-link :
<!-- moreContent -->
<div class="xinya-conten-item">
<router-link
class="moreContent"
tag="div"
:to="{ name: 'videoDetail', params: { id: listItem[0].id } }"
>
<div class="boxContent">
<span>点击观看更多...</span>
<img src="../assets/images/videoMore3.jpg" alt="" />
</div>
</router-link>
</div>
mounted() {
// 自动跳转到页面对应的年级位置
// 获取hash地址信息
var hash = window.location.hash;
// 提取井号内容,即id信息
var id = "#" + hash.substring(14);
// 利用scrollIntoView这个api实现自动跳转
document.querySelector(id).scrollIntoView(true);
},
a标签 :
a.html里:
<a href="b.html#abc">xxx</a>
b.html里加一个锚记:
<a name="abc"></a>
更多推荐
已为社区贡献2条内容
所有评论(0)