vue 进入页面无点击自动定位到某一位置 锚点

最新推荐文章于 2024-05-16 17:19:28 发布
原创 最新推荐文章于 2024-05-16 17:19:28 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文介绍了一种在Vue.js项目中实现页面返回顶部的方法，通过在div元素上使用@click事件调用returnTop()方法，并在methods中定义该方法来实现页面滚动到顶部的功能。此外，还介绍了如何在mounted生命周期钩子中记录当前路由，以便于导航栏的状态更新。

头部

 div加   @click="returnTop()"

 

methods里 

 returnTop() {

      document.querySelector("#headers").scrollIntoView(true); //跳转到顶部

      window.scrollTo(0, 0);

    },

 

// 刷新后也不影响 在mounted里加

 mounted() {

    console.log(this.$route.path);

    //获取地址栏中的路由，设置elementui中的导航栏选中状态

    this.activeIndex = this.$route.path;

  },

Vue2 - 最新详细实现锚点跳转及平滑过渡动画功能，锚点定位滑动吸顶将锚点菜单固定在顶部或悬浮，页面导航菜单跳转指定元素位置、文章目录跳转到对应章节等场景，vue2锚点滚动至指定区域详细示例代码教程
🏆 前端领域优质创作者
07-05 5689
vue2，nuxt2，锚点，锚点定位，跳转到指定位置，锚点定位跳转，添加锚点，根据文章浏览位置，目录高亮相应标题，锚点定位的目录，竖向滚动条效果并实现锚点定位跳转，滚动与导航联动，导航栏绑定内容锚点+滚动动画，vue锚点平滑滚动，如何设置描点跳转到对应页面，菜单绑定内容锚点滚动动画，锚点滚动过程怎么加入动画，过渡效果，anchor，导航锚点联动，滚动监听和点击平滑滚动跳转实例，页面内跳转锚点的使用，跨页面锚点跳转，锚点滚动，定位滚动，实现锚点定位以及平滑滚动到指定位置，动态锚点定位，页面滚动和点击菜单联动效
vue跨页面定位到锚点位置
沫沫酱
11-20 3044
效果： header页面： <a:href="'#/about?maodian=gsjj'">公司介绍</a> <a:href="'#/about?maodian=fzlc'">发展历程</a> <a:href="'#/about?maodian=ryzz'">荣誉资质</a> <a:href="...
Vue 表单校验错误位置自动定位
weixin_41438466的博客
04-19 2519
表单校验失败会生成名为“is-error”的类，据此即可实现自动定位 saveToDb() { this.$refs["FormName"].validate((valid) => { if (valid) { //执行操作 }else { setTimeout(() => { var isError = document.getElementsByClassName("is-error");
Vue 使用原生 js 实现锚点定位到指定位置
Java精选
09-04 2855
通过href定位会在访问地址栏中增加ID值，影响url正常请求，不太友好；另外是href定位如果不想定位到浏览器界面顶部位置时， 需要在对应的ID值内部元素中增加外间距，如果需要多个同样定位元素展示，就会导致间距过大页面太难看了。网上有很多通过href锚点定位的方式，也有很多千奇百怪的方法！这种方式就可以解决多个同界面的不用元素锚点定位，只需要两步操作非常简单，网上的方式有些都是乱用方法。来源：https://www.yoodb.com/notes/1001.html。#方式二：原生js指定位置定位。
vue点击事件页面自动定位到该位置
最新发布
qq_45160662的博客
05-16 538
【代码】vue点击事件页面自动定位到该位置。
校验或保存信息时,弹出提示信息并跳转到对应位置
weixin_42704650的博客
09-04 557
需求: 当校验输入值是否符合要求时,当不符合时弹出提示信息,并使鼠标光标跳转到对应位置 案例: 保存表单时,都需要校验一下表单是否有未填写的值,当用户未填写时,点击保存时,提示用户未填写,并跳转到对应的位置 if($("#areaName").val()==""){ dormAlertChange("区域名称不能为空!",$("#areaName")); return fals...
Vue监听滚动实现锚点定位(双向)示例
10-16
这个Vue示例实现了一个基本的双向锚点定位功能，即通过滚动页面内容或点击导航链接，页面可以自动定位到指定的部分，并通过动态更新导航状态来提供直观的用户体验。这个功能在单页应用中非常实用，可以大幅提升内容...
vue项目中锚点定位替代方式
10-16
因此，第一次点击后URL虽然发生了变化，但是页面内容没有响应式的更新到锚点位置，往往需要用户再次点击链接才能实现跳转。 为了避免这种情况，可以采用JavaScript中的scrollIntoView()方法来替代传统的锚点定位。...
实现一个 Vue 吸顶锚点组件方法
10-16
2. **锚点定位**：点击按钮时，页面滚动至与按钮关联的元素位置。这可以通过计算元素的`offsetTop`属性，并使用`window.scrollTo()`方法实现。 3. **高亮匹配按钮**：当滚动内容区域时，自动高亮与当前可视区域最近...
vue-scrollto：非常好用的页面定位滚动插件
xxq_0217的博客
12-21 4002
楼层效果在购物网站比较常见，便于客户查看商品。这个效果其实可以说是老生常谈了，原生js我们写过，在 JQuery的插件里随便搜一下，也有大把的案例手把手教你如何来实现。但如果把这个效果放在 vue 中来实现，那先前的一些思路就用不上了。
vue3 多种方法的锚点定位
weixin_49295874的博客
10-09 3423
在 Vue 3 中，可以通过多种方式实现锚点定位，包括使用原生的 JavaScript 方法和利用 Vue Router 提供的导航守卫等。下面我会分别介绍这些方法。
vue项目中滚动到某元素位置
qq506930427的博客
12-10 1万+
1.使用a标签+#号 &lt;a href="#box1"&gt;我跳到box1&lt;/a&gt; &lt;div id="box2"&gt;&lt;/div&gt; 上面这一种的缺点是，url会发生改变，会在url最后面加上片段识别符#box2，这样就改变了URL的路径，这是我们不想看到的。因为再次刷新的时候回出现问题。当使用 vue-router回退时，发现需要回退很多次。 2.s...
vue实现元素快速定位
萝卜666的博客
06-12 5072
需求：一个列表中有可能会有N多条数据，我在选择一个item查看详情的情况下。如果上下滚动想要再次找到这个位置的时候可能会很麻烦了，需要滚动滚动再滚动。所以，就需要一个悬浮的上下箭头去快速定位到刚才的位置。以下是我做的效果~~~ ...
vue项目中实现锚点定位
hfhwfw161226的博客
09-29 1万+
使用场景：当页面被分割成许多小模块，且页面很长时，锚点功能可以帮助我们快速跳转到想要的模块；而当滑动滚动条时，根据当前视图中的显示的模块自动选中对应的锚点。
refs 获取元素位置_vue中的 ref 和 $refs
weixin_32809369的博客
02-01 3817
相信前端开发或者后端开发都用过jquery,因为不是数据驱动，为了获取某些元素的value值，都操作过Dom元素。//使用Jquery获取Dom元素值$("#id").text('xxx')$("#id").value('xxx')//使用原生Domdocument.getElementById("id")document.getElementsByClassName("...
vue页面内部定位到锚点位置
沫沫酱
11-20 1万+
上个文章写了跨页面的锚点定位，锚点的页面是在mounted里调用的定位到锚点位置，只有新打开此页面时才会执行mounted，所以当前页面内进行点击定位到锚点位置不起作用，解决方法在main.js里的watch里一直监听着URL是否发生变化，如果URL变化就执行锚点定位方法。 效果： 在mian.js中添加 import{goAnchor,GetQueryString}from'.....
vue 从一个页面跳转到另一个页面的指定位置
热门推荐
qq_43528934的博客
07-01 1万+
需求：home页面跳转到courseDesc页面的指定位置 home页面： courseDesc页面： TAB1 第一部分内容区域 TAB2 第二部分内容区域 在mounted里 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190701143134959.png?x-oss-process=image/watermark,type_ZmFuZ...
Vue 跳转页面 定位到某个位置 scrollIntoView 锚点滚动
RosaChampagne的博客
07-30 5912
效果图： html代码： <!-- Prime专享折扣商品 --> <div id="member-goods-list-box"> <div class="member-goods-container"> <div class="member-goods-label"> <div class="member-goods-text-one">Prime</div> <div class="me
Vue3+ts 跳转页面 定位到某个位置 scrollIntoView 锚点滚动
03-28
可以通过以下方式在 Vue3 中实现跳转页面并定位到某个位置的滚动效果： 1. 在目标位置添加一个具有唯一标识的元素（例如 `<div id="target"></div>`），作为锚点。 2. 在跳转页面的组件中，引入 `ref` 和 `onMounted`，并使用 `scrollIntoView` 方法实现滚动： ```typescript <template> <div ref="target" id="target">目标位置</div> <button @click="scrollToTarget">跳转到目标位置</button> </template> <script lang="ts"> import { defineComponent, onMounted, ref } from 'vue' export default defineComponent({ setup() { const targetRef = ref(null) const scrollToTarget = () => { targetRef.value?.scrollIntoView({ behavior: 'smooth' }) } onMounted(() => { if (location.hash === '#target') { scrollToTarget() } }) return { targetRef, scrollToTarget, } }, }) </script> ``` 在 `onMounted` 钩子函数中判断当前页面是否包含 `#target` 锚点，如果有则执行 `scrollToTarget` 方法，实现自动滚动到目标位置的效果。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值