Vue锚链接(两种方法) scrollIntoView
第一种：常见 锚链接，id和 href 结合起来
<div id="one" style="height: 300px;">第一</div>
<div id="two" style="height: 300px;">第二</div><a href='#one'>回到第一</a>
<a href='#two'>回到第二</a>
在vue项目中可能会导致第一次点击没有效果，第二次点击才跳到对应位置，
因为在 router中设置了 scrollBehavior: () => ({ y: 0 }),导致的，但是我们需要路由跳转时滚动条回到初始位置，所以这里可以用另一种方法：即第二种
第二种：element.scrollIntoView() 实现 锚链接
<div id="one" style="height: 300px;">第一</div>
<div id="two" style="height: 300px;">第二</div><h2 @click="handleScroll('one')">回到第一</h2>
<h2 @click="handleScroll('two')">回到第二</h2>
methods: {handleScroll(id) {var element = document.getElementById(id);element.scrollIntoView(); // 参数 false 代表 Bottom}
}
页面滚动到顶部
document.documentElement.scrollTop = 0;
Vue锚链接(两种方法) scrollIntoView相关推荐
- 创建Vue项目的两种方法(镜像和官网)
两种搭建方法: 安装node:brew install node 查看node版本:node -v 安装npm:brew install npm 查看npm版本:npm -v 使用淘宝镜像 使用官网办 ...
- 解决vue项目eslint校验 Do not use ‘new‘ for side effects 的两种方法
解决vue项目eslint校验 Do not use 'new' for side effects 的两种方法 参考文章: (1)解决vue项目eslint校验 Do not use 'new' fo ...
- vue 获取请求url_vue 获取url里参数的两种方法小结
我就废话不多说了,大家还是直接看代码吧~ 第一种: const query = Qs.parse(location.search.substring(1)) let passport = query. ...
- 多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...
在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title ...
- Vue父组件访问子组件属性和方法、父子组件双向绑定（两种方法）
Vue父组件访问子组件属性和方法.父子组件双向绑定(两种方法) 1. 使用vue-cli创建项目 目录结构如下图: 2. 编写代码 src/components/HelloWorld.vue < ...
- vue实现打印功能的两种方法/web打印控件
第一种方法:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入 安装好以后在main.js文件中引入 1 2 import Print fro ...
- vue项目动态设置浏览器标题title两种方法
各位铁汁们,老步骤先效果图奉上 方法一.使用插件vue-wechat-title来设置浏览器动态标题 第一步:安装插件 1. npm vue-wechat-title --save 第二步:在全局ma ...
- Vue项目引入icon图标的两种方法
我用的是阿里巴巴矢量图标库 ****一,在文件中引入icon项目链接 将图标加入项目后会出一个链接(每新添加图标,此链接都应更新) 在Vue项目中,public/index.html中 将项目链接复制 ...
- 【VUE】vue实现登录滑动拼图验证的两种方法，纯前端组件验证以及前后端同时验证
vue实现登录滑动拼图验证的两种方法: 第一种是纯前端组件验证,只能区分是人为操作还是机器操作. 第二种是前后端同时验证,这种方法加上后端校验相对会更安全一些.(注:在最底部加上了同时兼容移动端的方法 ...
最新文章
- Python--32 模块 包
- 实现首字母或拼音检索-sql语句方式
- 蓝牙stack bluez学习（1）Stack Architecture
- ASP.NET DEMO 12 : CheckBoxList 实现单选
- adadelta算法_神经网络中常用的优化算法
- java list 排序_java list排序
- js中函数的使用方式及回调函数
- java反射jdk1.8,Java基础----jdk1.8 反射实验
- 9:14 2009-7-22
- 深入细枝末节，Python的字体反爬虫到底怎么一回事
- mysql sqlserver alter语句区别_SQL ALTER
- ruby笔记 基于对象的类(object specific class)
- mysql安装手册（2）
- 共轭梯度（CG）算法
- Unity 中文语言包下载
- php随浏览器大小变化,如何在将图像显示到浏览器之前使用php重新调整图像大小？...
- 每个计算机主机只有一个硬盘吗,电脑多加一个硬盘需要重装系统吗? 电脑如何新增加一块硬盘...
- 微信小程序014租房-房屋租赁合同系统
- R语言将向量数据按照行方式转化为矩阵数据（设置参数byrow为TRUE）、计算矩阵数据的特征值（eigenvalue）
- erdas2014安装