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 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
AngularJS快速入门
Apr 02 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
Vue+Element-U实现分页显示效果
Nov 15 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 Javascript
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
基于php-fpm 参数的深入理解
2013/06/03 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
JavaScript 指导方针
2007/04/05 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
javascript prototype,executing,context,closure
2008/12/24 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
如何使用python传入不确定个数参数
2020/02/18 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
高中运动会广播稿
2014/01/21 职场文书
交通安全教育制度
2014/02/02 职场文书
实习公司领导推荐函
2014/05/21 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
军事理论课感想
2015/08/11 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫