登录  |  注册
当前位置：网站首页 > 更多 > 站长帮 > 正文

[WEB] vue页面内锚点跳转

作者：CC下载站 日期：2021-08-28 00:00:00 浏览：50 分类：站长帮

这两天想用刚学的Vue做一个网址导航，刚好手里有一个域名v1.pw，于是唯一导航便诞生了。

Element真的踩坑无数，不同组件嵌套起来有不同奇葩BUG。
然后我想的是右边的菜单导航，点击之后页面就滑动到相应的地方，因为导航比较简单，所以基本上就在一个页面了。
一开始想的是用a标签的跳转，然后把那些分类的id就弄为href属性。
然后发现页面直接跳转了。
在网上发现了Element.scrollIntoView()

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

在methods里面定义一个跳转方法

    skip(targetId) {
      let el = document.getElementById(targetId)
      if (el) {
        el.scrollIntoView({behavior: "smooth"})
      }
    }

在页面里面调用

@click="skip('tab-'+item.category.id)"

就可以达到想要的效果了

猜你还喜欢

您需要 登录账户 后才能发表评论

取消回复欢迎 你 发表评论:

精品推荐！
欢迎 访客 登录没有账号？
  • 最新文章
  • 热门文章
  • 热评文章
最新评论
热门tag
友情链接

关灯