vue 实现锚点功能操作
更新时间：2020年08月10日 10:09:25 作者：酸涩葡萄
这篇文章主要介绍了vue 实现锚点功能操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
最近遇到一个需求，进入页面，滚动到锚点位置。
如何实现？
在router文件下的index.js中
配置：
1.配置
2.路由跳转
3.设置锚点
最后，我遇到了一个问题，你npm run build 生成项目后测试，第一次进入成功，然后在页面中操作一波，刷新，网页打开失败，
显示找不到资源。（不知别人有没有遇到过）
解决方案：将router文件夹下index.js中的mode:"history" 注释掉。
补充知识：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 实现锚点功能操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue如何动态改变列表搜索出关键词的字体颜色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Tailwind是由Adam Wathan领导的TailwindLabs开发的 CSS 框架，这篇文章主要介绍了vue3 tailwindcss的使用,需要的朋友可以参考下2023-08-08
Vue中scoped样式的作用是通过在DOM结构和CSS样式上添加唯一标记来实现样式私有化和模块化,这一功能是通过PostCSS转译实现的,总结了三条渲染规则：1. 为HTML DOM节点添加不重复的data属性；2. 在每个CSS选择器末尾添加当前组件的data属性选择器2025-01-01
vue中$router.back()和$router.go()的用法
这篇文章主要介绍了vue中$router.back()和$router.go()的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
今天小编就为大家分享一篇vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
今天小编就为大家分享一篇vue监听input标签的value值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue 中url 链接左边的小图标更改问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
vite是新一代的前端构建工具,下面这篇文章主要给大家介绍了关于Vite创建Vue3项目以及Vue3使用jsx的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue CLI3搭建的项目中路径相关问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了Vue使用Echart图标插件之柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论