tnblog
首页
视频
资源
登录

vue,vue3 js,ts实现类似a标签的锚点功能,因为vue路由导致直接html的锚点功能失效

243人阅读 2025/1/13 15:52 总访问:824568 评论:0 收藏:0 手机
分类: 前端

因为vue路由导致直接html的锚点功能失效,可以用js来实现,代码如下:

  1. const toAnchorPoint = (location: string) => {
  2. const dom = document.getElementById(location)
  3. dom.scrollIntoView({ behavior: 'auto', block: 'start' })
  4. }

调用的时候就传递一个id即可:

  1. <a @click="toAnchorPoint('overview')"> 课程概述 </a>
  2. <a @click="toAnchorPoint('standard')"> 课程标准 </a>
  3. <div class="box-radius cdc-overview" id="overview">
  4. </div>
  5. <div class="box-radius cdc-standard" id="standard">
  6. </div>

欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

ts实现动态拼接字符串实现类似 C 的 string.Format的格式化字符串。tsjs动态给拼接字符串提供参数

模板是这样的:”于${0}通过${1}课程体系《${2}》课程授课”对于这种格式的模板字符串,可以使用一个简单的替换函数来处理...

css弹性盒子flex布局

css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

css图片和文字对齐问题

文字和图片写到一排经常会出现对不齐的问题 这样感觉图片会上来一点没有和文字对齐,如下图 但是如果修改下html结...

GitHub 上传项目

补充简化方法:登录git创建项目--&gt;拉取刚刚创建的项目--&gt;复制需要的代码进去--&gt;上传提交即可先拉取项目在上传代码...

NET Core 使用 EF Code First

下面这些内容很老了看这篇:https://www.tnblog.net/aojiancc2/article/details/5365 项目使用多层,把数据库访问...

Windows平台分布式架构实践 - 负载均衡

原文地址: https://www.cnblogs.com/atree/p/windows_loadbalancer.html 概述  最近.NET的世界开始闹腾了,微软官方终...

caPS.NET 保存base64位格式的图片

publicvoidUpload() { //取出图片对应的base64位字符 stringimgBase=Request[&quot;imgBase&quot;]; //c#里边的base6...

使用OLEDB读取不同版本Excel的连接字符串设置

使用OleBD读取excel的时候,excel不同的版本,连接字符串的写法也会不一样。///&lt;summary&gt; ///读取excel ///&lt;/su...

vs2017 对 COM 组件的调用返回了错误 HRESULT E_FaIL

vs2017添加引用报错 对 COM 组件的调用返回了错误 HRESULT E_FAIL 1.以管理员身份打开vs2017开发人员命令指示符 2...

分布式服务架构与微服务架构概念的区别与联系

分布式:分散压力。微服务:分散能力。当下理解分布式:不同模块部署在不同服务器上作用:分布式解决网站高并发带来问题集...

分布式-微服务-集群的区别

1.分布式将一个大的系统划分为多个业务模块,业务模块分别部署到不同的机器上,各个业务模块之间通过接口进行数据交互。区...

NPOI操作excel 2007/2010版本

HSSFWorkbook:是操作Excel2003以前(包括2003)的版本,扩展名是.xlsXSSFWorkbook:是操作Excel2007的版本,扩展名是.xlsx先...

这样学英语三个月超过你过去学三年

本文作者三年间从四级勉强及格到高级口译笔试210,口试232。找工作面试时给其口试的老外考官听了一分钟就说你的英语不用考...

EasyUI弹窗批量修改combogrid下拉框的值

JS方法//点击弹出批量修改框 UpdateLot:function(){ varrow=$(&quot;#dg&quot;).datagrid(&quot;getChecked&quot;); if(...

Quartz.NET实例动态改变周期调度。misfire、Cron

Quartz:Java编写的开源的任务调度作业框架 类似Timer之类定时执行的功能,但是更强大Quartz.NET:是把Quartz转成C# NuGet...
这一生多幸运赶上过你.
排名
8
文章
221
粉丝
7
评论
7
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术