vue做本页面锚点定位

最新推荐文章于 2025-09-17 22:08:14 发布

原创最新推荐文章于 2025-09-17 22:08:14 发布 · 234 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

前端笔记专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何通过JavaScript的事件监听和DOM操作实现页面元素的滚动定位。具体示例中，点击一个锚点按钮，页面会自动滚动到指定ID的元素位置。这涉及到`scrollIntoView`方法的使用，该方法能够使元素滚动到视口可见区域。

1.锚点按钮

<div @click="positionBtn">点我</div>

2.绑定的元素

<div id="here">快到我这里来</div>

3.锚点事件

positionBtn(){
   document.querySelector("#here").scrollIntoView(true);
},

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

黑皮的崛起之路

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue 实现锚点功能操作

10-14

主要介绍了vue 实现锚点功能操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue中实现锚点定位功能

weixin_59525879的博客

01-10

2680

以上就是在Vue中实现锚点定位功能的一种方式。在Vue中实现锚点定位功能可以通过使用。接下来，在路由配置文件中，使用。来实现滚动到锚点的位置。属性来指定锚点的位置。时，在需要锚点定位的位置添加。结合路由的方式来实现。

参与评论您还未登录，请先登录后发表或查看评论

vue锚点导航

小小•愿望的博客

09-17

665

本文介绍了基于Vue和Element-UI实现锚点导航的方法。核心使用scrollIntoView()方法实现元素滚动定位，支持布尔型和对象型参数设置对齐方式。文章提供了基础实现代码，包括HTML模板、JS逻辑和CSS样式，并展示了点击导航联动效果。进阶部分增加了滚动监听功能，通过计算各锚点高度实现滚动时导航联动高亮，解决了点击和滚动冲突的问题。完整代码示例可通过在线链接查看。

Vue 实现锚点定位

m0_59985666的博客

08-13

1170

【代码】Vue 实现锚点定位。

vue中实现锚点定位

nunumaymax的博客

08-11

312

本文介绍了在Vue项目中实现锚点定位的解决方案。传统使用id和a标签的href方法会与路由的hash值冲突。推荐使用scrollIntoView()方法，它通过获取DOM元素并调用该方法实现平滑滚动定位，具有不改变URL、可设置缓冲效果等优点。该方法解决了Vue中锚点定位的常见问题，是更优的实现方案。

vue页面实现锚点定位

HuLuWa1997的博客

08-04

1311

html代码： <div class="loggincao-show" @scroll="scrollEvent"> /****目录部分***/ <ul class="titless"> <li v-for="(titleItems,index) in titleList" :key="index" :class="titleOnIndex === index ? 'active' : ''" @click="jump(index)">{{

详解Vue项目中实现锚点定位

10-17

在Vue项目中实现锚点定位，主要涉及Vue框架中处理路由跳转和页面滚动的技术。传统的HTML中的锚点定位方法，在Vue项目中可能无法正常工作，因为Vue框架对页面DOM的管理与原生HTML有所不同。具体来说，在Vue项目中，若...

Vue监听滚动实现锚点定位(双向)示例

10-16

在介绍如何使用Vue监听滚动事件实现锚点定位之前，我们首先要了解几个关键的概念和技术点，这些包括Vue框架本身、锚点定位的原理以及监听滚动事件在实现页面内导航中的应用。 Vue.js 是一个构建用户界面的渐进式...

vue滑动吸顶及锚点定位的示例代码

10-15

在这个示例中，我们将讨论如何在Vue项目中实现滑动吸顶和锚点定位功能。这两个特性对于创建响应式和交互性强的网页非常重要。首先，让我们深入理解滑动吸顶（Sticky Header）的概念。滑动吸顶是当页面向下滚动时，...

详解Vue项目中支撑锚点定位

热门推荐

hfhwfw161226的博客

09-29

1万+

使用场景：当页面被分割成许多小模块，且页面很长时，锚点功能可以帮助我们快速跳转到想要的模块；而当滑动滚动条时，根据当前视图中的显示的模块自动选中对应的锚点。

Vue锚点定位

weixin_44529746的博客

10-31

1万+

VUE锚点定位 // 点击此处 <div @click="goDingyue">立即订阅</div> 绑定事件 methods: { goDingyue() { // 获取元素在页面中的位置 console.log(this.$refs.dingyue_box_ref.getBoundingClientRect()); // document // .getElementById("agentTitle")

vue中使用锚点定位

活宝小娜的博客

01-22

1577

vue中不能使用a标签来使用锚点定位，可以使用scrollIntoView方法。

vue项目实现锚点定位

前端-黎姿

12-17

929

vue项目实现锚点定位功能

路漫漫其修远兮，吾将上下而求索

07-17

2479

背景在html中使用id可以简单实现锚点坐标功能，如下： // 起点 <a href="#mark">起点</a> // 终点 <div id="mark">终点</div> 但是此时在路由中会添加mark字样，看网上的帖子说由于vue项目用了router，用这个方法会跳转到其他页面，然而我这里并没有报错，顺利跳转到目标点了。。。当然还是寻求更好的方法。不直接用以上方法的原因主要有二： 1.它影响路径，如果做数据提交或其他需要获取当前路

【vue3】锚点定位（两种实现方式）

zxsy19966的博客

04-07

7651

vue3 锚点定位

Vue3实现锚点定位

qq_41429765的博客

04-01

545

由于引用组件实例，组件未挂载完成就获取ref，会出现此ref还未完全获取到组件撑开区域的高度，就会出现锚点滚动定位位置错乱的问题，修改ref写法，（el）=> {anchorRefs[item.path] = el }使用shallowRef可以实现浅层响应式引用组件实例，当对象的深层属性发生变化时不会触发视图更新，提高了性能。

vue3如何做锚点定位

05-09

在Vue3中，锚点定位可以通过使用`ref`和`scrollTo`方法来实现。具体步骤如下： 1. 在需要定位的元素中添加一个`ref`属性，例如`<div ref="target">`。 2. 在触发锚点定位的元素中添加一个点击事件，并在事件处理程序中调用`scrollTo`方法来实现定位。例如： ```javascript <button @click="scrollToTarget">定位到目标</button> ... methods: { scrollToTarget() { this.$refs.target.scrollIntoView({ behavior: 'smooth' }); } } ``` 其中，`scrollIntoView`方法是浏览器提供的API，可以将指定的元素滚动到浏览器窗口的可视区域内。`{ behavior: 'smooth' }`参数可以让滚动过程更加平滑。 3. 完成上述步骤后，点击触发锚点定位的元素，就可以将页面滚动到指定的元素位置了。