Vue.jsVue.js开发技巧

vue 锚点

2020-07-15  本文已影响0人  zhudying

在某些场景中,我们通常使用锚点,进行定位,跳转我们需要的页面

  1. 方法一
    a 标签的锚点跳转
<a href="#text" >点击跳转</a>

<a name="text" >跳转到的页面</a>  或 <div id="text" >跳转到的页面</div > 

如果在同一页面跳转,该方法会使页面 url 变化

  1. 方法二
    在点击事件里添加
<div onClick="changePage('#text')" >点击跳转</div > 
或 
<div @click="changePage('#text')" >点击跳转</div > 
// 方法
changePage(id){
    document.querySelector(id).scrollIntoView(true);
}

scrollIntoView() 是HTML5 的方法
scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素

要跳转的页面

<div id="text" >跳转到的页面</div > 

如果在同一页面跳转,该方法不会使页面 url 变化

上一篇 下一篇

猜你喜欢

热点阅读