Vue 使用原生 js 实现锚点定位到指定位置

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

#javascript #vue.js #前端 #锚点

文章介绍了如何在Vue应用中利用原生JavaScript获取元素的offsetTop属性，并结合window.scrollTop方法实现指定位置的定位，以适应多个不同界面元素的锚点需求。

原生 js 指定位置定位，这种方式可以解决多个不同界面的不用元素锚点定位。vue界面：

export default {
  methods: {
    goMarginTop(value) {
      let offsetTop = document.getElementById(value).offsetTop - 20
      window.scrollTop(0,offsetTop)
    }
  }
}

ZHANG.......
关注
原生js实现锚点定位，tab跟随内容变化，PC/移动端均适用
nicole27ll的博客
04-13 1957
最近做到相关的业务，发现关于tab锚点定位的问题很多文章采用的方法略有差异，现在采用最直观的方式实现锚点定位，tab跟随内容变化而变化。 逻辑通了之后，在任何框架和场景下都能使用，不一定要考靠组件来完成。以下是简单实现的HTML代码，结合移动端和PC端平台不同，更改注册时间类型就可以达到一样的效果。 锚点定位效果图 一、html代码 <div class="test"> <div class="title"> &l...
Vue组件封装，实现锚点导航功能
weixin_42190182的博客
07-26 1315
项目中路由用的hash模式，不好借助id锚点跳转，只能实现个类似的。
JS如何实现在页面上快速定位（锚点跳转问题）
10-19
本篇文章主要介绍了JS如何实现在页面上快速定位（锚点跳转问题），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现元素快速定位
萝卜666的博客
06-12 5089
需求：一个列表中有可能会有N多条数据，我在选择一个item查看详情的情况下。如果上下滚动想要再次找到这个位置的时候可能会很麻烦了，需要滚动滚动再滚动。所以，就需要一个悬浮的上下箭头去快速定位到刚才的位置。以下是我做的效果~~~ ...
【JavaScript源代码】vue实现锚点定位功能.docx
12-29
vue实现锚点定位功能 　　本文实例为大家分享了vue实现锚点定位的具体代码，供大家参考，具体内容如下　　这里主要是实现了一个简单的滚动触发锚点高亮，以及点击锚点触发滚动的功能 如果是获取浏览器的滚动高度，各个浏览器有所差异，使用以下几种方式： 　　Chrome： document.body.scrollTop Firefox： document.documentElement.scrollTop Safari： window.pageYOffset 　　我这里是局部元素滚动，因此稍有差异。先附上html及css代码块：　　scroll-content为滚动区域， operation-btn为
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
10-17
主要介绍了vue使用原生js实现滚动页面跟踪导航高亮的示例代码，滚动页面指定区域导航高亮。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue3 + TS 实现table锚点定位
u014260592的博客
01-19 1524
Vue3 + TypeScript 实现el-table锚点定位、表格错误定位、表格行定位
在vue项目使用原生js做锚点平滑滚动
冰棱的血腥
10-19 6081
如题所述，想必大家经常在vue项目中要用到锚点点击页面平滑滚动的效果，网上也有很多的插件，今天分享一个原生js简单实现的方法。 如图所示，我的需求是点击左边的菜单，右边内容平滑滚动到相应内容，下面贴出部分代码： &amp;lt;div class=&quot;menu&quot;&amp;gt; &amp;lt;div class=&quot;options&quot; :class=&quot;[curre
vue锚点定位（代码通用） - 总结篇
草巾冒小子的博客
04-15 5558
vue锚点定位（场景案例） 跨页面锚点 当前页面锚点 vue hash模式下的锚点 vue history模式下的锚点 相关文章 https://segmentfault.com/q/1010000007888351
【vue】点击定位到页面的某个位置
m0_61049675的博客
06-28 2669
【代码】【vue】点击定位到页面的某个位置。
实现点击锚点平滑滚动至指定位置
weixin_49098968的博客
02-06 5114
点击锚点跳转到页面指定位置添加平滑滚动效果，可以平滑滚动至页面指定位置。通过js或者css实现此效果。
关于javaScript定位 position语法
Too_Soup_Soup的博客
03-26 2704
position定位 static //默认定位 relative //相对定位 absolute //绝对定位 fixed //固定定位 sticky //粘性定位 1.static(固定定位) 不脱离文档流 2.relative（相对定位）不脱离文档流 元素相对于自己元素的初始位置作为参照 3.absolute（绝对定位）脱离文档流 元素相对于离自己最近的父类元素作为参照 4.fixed（固定定位） 脱离文档流 元素相对于自己最近的父类元素作文参照 5.sticky（粘性定位）脱离文档流 元素相.
Vue实现锚点定位导航功能
weixin_48927323的博客
06-30 2275
Vue实现锚点定位导航功能
Vue 爬坑之路（七）—— 监听滚动事件 实现动态锚点
weixin_34395205的博客
03-04 2664
前几天做项目的时候，需要实现一个动态锚点的效果 如果是传统项目，这个效果就非常简单。但是放到 Vue 中，就有两大难题： 1. 在没有 jQuery 的 animate() 方法的情况下，如何实现平滑滚动？ 2. 如何监听页面滚动事件？ 在浏览了大量文章、进行多次尝试之后，终于解决了这些问题 期间主要涉及到了 setTimeout 的递归用法，和 Vue 生命周期中的 mounted...
vue新手上路
m0_50666077的博客
03-12 2364
vue新手上路 ——记录于2021.3.12 一、对前端基本知识的汇总（个人不熟悉的） 1、position：absolute、relative、fixed和static四种定位方式的理解 （1）static：静态的，是position的默认值，所以一般要么position没有定义默认这个，要么定义的时候肯定不写这个； （2）relative：相对的，用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置（占坑不放）。 （3）absolute：绝对的，多和relative搭配使用（就近原则，父相子绝：
vue锚点，滚动高亮导航
Y丶小琪
07-24 1122
需求：锚点功能，点击导航滚动到可视区域。滚动内容区域，也可以高亮导航。
vue项目中点击顶部导航定位到页面指定位置
最新发布
Rovstephanie的博客
05-10 1786
在导航的位置加一个@click="handleTabClick",此处的handleTabClick你可以自定义名字，只要和script中的方法调用名字一致就可以。 二、添加ref属性 在你想定位到达的部分添加一个ref属性，你可以自定义它的名字，这里给出的示例是，点击导航中的资源展示和资源查询，定位到教育资源展示和教育资源查询的部分： 三、script中的操作
Vue实现导航栏绑定内容锚点+滚动动画+vue-router
Z2564663790的博客
03-25 1313
锚点定位加动画并解决一些小坑
js锚点定位
bestyinjun的专栏
08-22 2441
js锚点定位
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值