vue 实现锚点功能操作


Posted in Javascript onAugust 10, 2020

最近遇到一个需求,进入页面,滚动到锚点位置。

如何实现?

在router文件下的index.js中

配置:

1.配置

vue 实现锚点功能操作

2.路由跳转

vue 实现锚点功能操作

3.设置锚点

vue 实现锚点功能操作

最后,我遇到了一个问题,你npm run build 生成项目后测试,第一次进入成功,然后在页面中操作一波,刷新,网页打开失败,

显示找不到资源。(不知别人有没有遇到过)

解决方案:将router文件夹下index.js中的mode:"history" 注释掉。

vue 实现锚点功能操作

补充知识:vue开发中,实现锚点定位及跳转(url不发生变化)

如下所示:

<template>
	<div>
		<div id='header'></div>
		<div class='footer' @click='returnTop'></div>
	</div>
</template>
methods:{
  returnTop(){
   document.querySelector("#header").scrollIntoView(true);
  }
 }

document.querySelector(“要返回地方的id”).scrollIntoView(true);

HTML5选择了scrollIntoView() 作为标准方法,scrollIntoView()可以在所有的HTML元素上调用。

通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视窗中。

如果给该方法传入true作为参数,或者不传入任何参数,那么 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。

如果给该方法传入false作为参数,调用元素会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平)不过顶部不一定齐平。

以上这篇vue 实现锚点功能操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
angular十大常见问题
Mar 07 Javascript
require.js中的define函数详解
Jul 10 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 #Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 #Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 #Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 #Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 #Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 #Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 #Javascript
You might like
mysql5写入和读出乱码解决
2006/11/25 PHP
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
javascript 打印内容方法小结
2009/11/04 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
python算法学习之计数排序实例
2013/12/18 Python
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Python中with及contextlib的用法详解
2017/06/08 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
软件测试面试题
2014/01/05 面试题
工作自我评价分享
2013/12/01 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
公务员保密承诺书
2014/03/27 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
文明礼仪倡议书
2015/04/28 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
javascript函数式编程基础
2021/09/15 Javascript
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis
Go并发4种方法简明讲解
2022/04/06 Golang