Vue 实现锚点定位

问题：

vue在hash模式下使用传统a标签描点定位时会改变路由地址，刷新页面时会出现空白页面

解决方法：

HTML

 <!-- 导航--><a href="javascript:;" @click="anchorPoint('#nav1')"> 导航1 </a><a href="javascript:;" @click="anchorPoint('#nav2')"> 导航2 </a><a href="javascript:;" @click="anchorPoint('#nav3')"> 导航3 </a><!-- 内容 --><div id="nav1"> 内容1 </div><div id="nav2"> 内容2 </div><div id="nav3"> 内容3 </div>

 methods:{anchorPoint(id){document.querySelector(id).scrollIntoView({behavior: "smooth"});},}

Vue 实现锚点定位相关推荐

移动端html锚点,vue实现锚点定位，移动端同样适用
本来首先想到的就是用a链接进行锚点跳转,但是a链接会产生新的路由,为了防止对项目产生影响就使用了js进行操控滚动条的滑动,下面是一个小demo! 一.html代码 {{item}} {{item}}/ ...
Vue实现锚点定位导航功能
项目中路由用的hash模式,不好借助id锚点跳转,只能实现个类似的. 效果图 Anchor.vue <template><div class="anchor clearfi ...
vue锚点定位（代码通用） - 总结篇
vue锚点定位(应用场景) 当前页面锚点跨页面锚点 hash模式下的锚点 history模式下的锚点应用前提:(重要的事情,说3+1遍) 任意场景.任意代码.任意框架都能对接! 都能采用! 都能 ...
Vue中如何正常使用锚点定位？
问题: 项目中会有一些功能需要用到锚点定位,比如文章目录.点击标题跳转到正文内容等等.但vue的路由设置默认为hash模式,正常使用a标签的锚点定位,在浏览器刷新/后退/前进时,路由会匹配不上,导致页 ...
vue中使用scrollTo实现锚点定位
vue利用window.scrollTo快速实现锚点定位页面部分 <div id="app"><ul class="menus">&l ...
vue、uniapp实现锚点定位
1.vue 点击页面定位到指定位置锚点跳转方法 html部分: <template><div class="home"><div class=&qu ...
vue中实现锚点定位
vue中实现锚点定位通过监听滚动事件,高亮显示锚点按钮添加点击事件,根据锚点滚动至对应区域并实现平滑滚动这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能如果是获取浏览器的 ...
vue页面实现锚点定位
html代码: <div @scroll="scrollEvent">/****目录部分***/<ul class="titless"> ...
jquery锚点定位
jquery实现锚点定位功能这里主要是通过jquery实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能 $leftnav为左侧楼层导航栏(left-nav),右侧right-conten ...

Vue 实现锚点定位

问题：

解决方法：

Vue 实现锚点定位相关推荐

最新文章

热门文章