vue跳转页面滚动到指定位置--瞄点

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>
  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值