在vue项目中,因为采用路由跳转,会导致无法使用常规的a标签配合ID的锚点功能。

解决办法:

<a href="javascript:void(0)" @click="goAnchor('#anchor')"> 灰啊灰啊我的骄傲放纵</a>
methods: {
goAnchor(selector) {
var anchor = this.$el.querySelector(selector)
document.body.scrollTop = anchor.offsetTop
}
}

17. 9. 20 更新:  以上在FireFox有BUG,修复如下:

methods: {
goAnchor(selector) {
var anchor = this.$el.querySelector(selector)
document.body.scrollTop = anchor.offsetTop; // chrome
document.documentElement.scrollTop = anchor.offsetTop; // firefox
}
}

18. 5. 17 更新: 针对有好几个小伙伴提出的按此方法没有效果,统一回复如下

  1. 此方法中改变body的滚动距离只是一个示例,非通用,实际开发中,你要清楚到底是改变哪个元素才能达到你的效果。

   弄清楚这个,然后再去赋值。这是属于比较基础的知识。

2. 还有就是,博客评论我看到都会回复,微信提问处理更快。But, 我只会提思路,不会直接给出代码,思想懒惰者勿扰!

vue2.0模拟锚点的更多相关文章

  1. vue2.0模拟锚点实现定位平滑滚动

    vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...

  2. 使用vue2.0 vue-router vuex 模拟ios7操作

    其实你也可以,甚至做得更好... 首先看一下效果:用vue2.0实现SPA:模拟ios7操作 与 通讯录实现 github地址是:https://github.com/QRL909109/ios7 如 ...

  3. vue2.0 transition -- demo实践填坑

    前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果 ...

  4. vue2.0+elementUI构建单页面后台管理平台

    git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...

  5. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探

    更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...

  6. 重开Vue2.0

    目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加 ...

  7. Vue2.0+组件库总结

    转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...

  8. 转:Vue2.0+组件库总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  9. vue2.0+element-ui(01简单点的单页面)

    前言: 在<Vue.js权威指南>刚出版的时候,自己就作为一名前端粉捧了一把场,可是真是应了那句“出来混,总是要还的“这句话了,那时候信心满满的买来书想要认真研究,最终却还是把它搁浅了.直 ...

随机推荐

  1. Redis-发布与订阅

    发布与订阅(pub/sub)的特点是订阅者负责订阅频道发送者负责向频道发送二进制字符串消息.每当有消息发送至给定频道时,频道的所有订阅者都会收到消息 (发布和订阅命令) SUBSCRIBE : SUB ...

  2. C++ 小知识点 WINAPI

    int WINAPI WINMain 中,WINAPI含义 网友给出回答:在windef.h头文件中有如下定义#define WINAPI      __stdcall#define APIENTRY ...

  3. JS DOM操作(四) Window.docunment对象——操作内容

    操作内容:即对标签所夹内容的操作 一 非表单元素内容操作 定位 var a = document.ElementById( "id" ) 1.获取内容 var s = a.inne ...

  4. 36.Linux驱动调试-根据oops定位错误代码行

    1.当驱动有误时,比如,访问的内存地址是非法的,便会打印一大串的oops出来 1.1以LED驱动为例 将open()函数里的ioremap()屏蔽掉,直接使用物理地址的GPIOF,如下图所示: 1.2 ...

  5. 【ibatis】IBatis介绍

    Ⅰ .什么是Ibatis? ① iBATIS的是一个持久层框架,它能够自动在 Java, .NET, 和Ruby on Rails中与SQL数据库和对象之间的映射.映射是从应用程序逻辑封装在XML配置 ...

  6. Java开发中常用的设计模式(二)---单例模式

    一. 懒汉式单例 //懒汉式单例类.在第一次调用的时候实例化自己 public class Singleton { private Singleton() {} private static Sing ...

  7. Java - equals方法

    java提高篇(十三)-----equals()方法总结 equal和==区别 ==比较对象基于内存引用,两个引用完全相同返回true Java 语言里的 equals方法其实是交给开发者去覆写的,让 ...

  8. java设计模式-----23、命令模式

    概念: Command模式也叫命令模式 ,是行为设计模式的一种.Command模式通过被称为Command的类封装了对目标对象的调用行为以及调用参数. 命令模式(Command Pattern)是一种 ...

  9. SpringMVC拦截器实现:当用户访问网站资源时,监听session是否过期

    SpringMVC拦截器实现:当用户访问网站资源时,监听session是否过期 一.拦截器配置 <mvc:interceptors> <mvc:interceptor> < ...

  10. javascript原型对象与原型链

    在javascript中,当系统加载构造函授后 ,会自动在内存中增加一个对象,这个对象就是原型对象.构造函数和原型对象在内存中表现为相互独立,但两者之间还存在联系,构造函数的prototype是原型对 ...