当前位置: 首页 > news >正文

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

来源:https://www.yoodb.com/notes/1001.html

方式一:传统href锚点定位
网上有很多通过href锚点定位的方式,也有很多千奇百怪的方法!这种跳转方法实现的是从某个位置跳转到同页面的另一个位置。

通过href定位会在访问地址栏中增加ID值,影响url正常请求,不太友好; 另外是href定位如果不想定位到浏览器界面顶部位置时, 需要在对应的ID值内部元素中增加外间距,如果需要多个同样定位元素展示,就会导致间距过大页面太难看了。

类似如下图效果,就不太实用:

图

#方式二:原生js指定位置定位
这种方式就可以解决多个同界面的不用元素锚点定位,只需要两步操作非常简单,网上的方式有些都是乱用方法。

侧边栏锚点定位不同元素位置,vue界面

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

相关文章:

  • 64. 最小路径和 java解决
  • 【mia】rtc_Push和player拉取
  • GDScript进行HTTP请求以及session问题
  • Python + Selenium + Chrome Driver 自动化点击+评论+刷弹幕(仅供学习)
  • workmanager导入android studio
  • Fast R-CNN
  • 【Spring系列03】依赖注入(DI)[之set注入]
  • 机器学习笔记之支持向量机(二)引出对偶问题
  • invokeBeanFactoryPostProcessors
  • 使用 pnpm monorepo + ts 制作个功能完善的 CLI 命令行工具
  • leetcode:714. 买卖股票的最佳时机含手续费
  • 基于MATLAB的曼彻斯特调制与解调实现
  • SpringBoot 实现 Oracle 主从数据库的动态切换,并实现读写分离
  • 24.缓存
  • 【AJAX是什么】【AJAX的基本使用】
  • @angular/forms 源码解析之双向绑定
  • Angular6错误 Service: No provider for Renderer2
  • express.js的介绍及使用
  • Javascript Math对象和Date对象常用方法详解
  • Java面向对象及其三大特征
  • js作用域和this的理解
  • thinkphp5.1 easywechat4 微信第三方开放平台
  • 第三十一到第三十三天:我是精明的小卖家(一)
  • 规范化安全开发 KOA 手脚架
  • 那些年我们用过的显示性能指标
  • 爬虫进阶 -- 神级程序员:让你的爬虫就像人类的用户行为!
  • 浅谈JavaScript的面向对象和它的封装、继承、多态
  • 如何实现 font-size 的响应式
  • 为视图添加丝滑的水波纹
  • 延迟脚本的方式
  • 云大使推广中的常见热门问题
  • Nginx实现动静分离
  • Salesforce和SAP Netweaver里数据库表的元数据设计
  • ​DB-Engines 11月数据库排名:PostgreSQL坐稳同期涨幅榜冠军宝座
  • $refs 、$nextTic、动态组件、name的使用
  • (4)事件处理——(6)给.ready()回调函数传递一个参数(Passing an argument to the .ready() callback)...
  • (C++17) optional的使用
  • (Redis使用系列) SpirngBoot中关于Redis的值的各种方式的存储与取出 三
  • (Redis使用系列) Springboot 整合Redisson 实现分布式锁 七
  • (独孤九剑)--文件系统
  • (附源码)spring boot球鞋文化交流论坛 毕业设计 141436
  • (附源码)springboot工单管理系统 毕业设计 964158
  • (论文阅读23/100)Hierarchical Convolutional Features for Visual Tracking
  • (转)C#调用WebService 基础
  • *** 2003
  • .jks文件(JAVA KeyStore)
  • .NET 中 GetProcess 相关方法的性能
  • .net 桌面开发 运行一阵子就自动关闭_聊城旋转门家用价格大约是多少,全自动旋转门,期待合作...
  • .NET/ASP.NETMVC 深入剖析 Model元数据、HtmlHelper、自定义模板、模板的装饰者模式(二)...
  • .NET/C# 将一个命令行参数字符串转换为命令行参数数组 args
  • /bin、/sbin、/usr/bin、/usr/sbin
  • /var/spool/postfix/maildrop 下有大量文件
  • @Responsebody与@RequestBody
  • [AIGC] 开源流程引擎哪个好,如何选型?
  • [ARM]ldr 和 adr 伪指令的区别