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>
Logo

前往低代码交流专区

更多推荐