vue 锚点

作者: zhudying | 来源:发表于2020-07-15 10:42 被阅读0次

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

  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 变化

相关文章

网友评论

    本文标题:vue 锚点

    本文链接:https://www.haomeiwen.com/subject/qhhdhktx.html