0 前言

本文用简单的<a>标签实现页面内、跨页面的锚点跳转。
更复杂的含有跳转、滚动动画的锚点跳转，本文中尚未更新。

1 原理说明

在要跳转处，添加<a href="#anchor-specific"> anchor from </a>标签
在锚点出，添加<div id="anchor-specific"> anchor to<div>id

每个以 # 开头的链接 href 值都指向拥有相应 id （不含 #） 的元素
点击<a>标签，即可实现锚点跳转

2 代码实现

2.1 页面内

3_Anchor.vue中

<template>
<div><ul><li><a href="#anchor-a">1</a></li><li><a href="#anchor-b">2</a></li><li><a href="#anchor-c">3</a></li><li><a href="#anchor-d">4</a></li></ul>
</div><div><div id="anchor-a" class="big-block"><h1>a</h1></div><div id="anchor-b" class="big-block"><h1>b</h1></div><div id="anchor-c" class="big-block"><h1>c</h1></div><div id="anchor-d" class="big-block"><h1>d</h1></div></div>
</template><script>
export default {name: "3_Anchor"
}
</script><style scoped>
.big-block{width: 400px;height: 600px;background-color: lightblue;
}
</style>

2.2 跨页面

4_JumpAnchor.vue中

<template>
<div><a href="/anchor#anchor-b"><h3>jump anchor to '/anchor#anchor-b'</h3></a>
</div>
</template><script>
export default {name: "4_JumpAnchor"
}
</script><style scoped></style>

3 注意

建议Vue3中使用history模式，而不是hash模式。

const router = createRouter({history: createWebHistory(),//history: createWebHashHistory(),routes,
})

hash模式中，#被占用，<a>标签的锚点跳转失效，需要使用js的方法进行跳转（window.scrollTo(x,y)像素跳转、Element.scrollIntoView()元素可见）。

您可以参考：vue项目hash路由锚点定位问题

4 参考

《HTML5与CSS3基础教程（第8版）》

【前端】HTML锚点跳转实现相关推荐

前端开发周边（js版页内锚点跳转方法）
js版页内锚点跳转方法关键词:focus(获取光标) 使用方法: 1.首先引入 jQuery HTML代码段 <div><h1 id="text1">12 ...
web前端学习笔记——锚点跳转
锚点跳转一.页面内锚点跳转在同一页面中,这个位置跳转到另一个位置方法: 设置锚点两种方式: 在目标位置随意找一个标签,添加一个id属性 <h2 id="mubiao" ...
html跳转过度,jq实现锚点跳转过度
jq实现锚点跳转过度 2020年10月29日 | 萬仟网IT编程 | 我要评论 jq实现锚点跳转过渡例子:当我们浏览页面想回到页面顶部时,点击按钮会回到想要去到的锚点.1.数据内容(html) 跳转 ...
html a标签锚点跳转的简单应用
html <a>标签锚点跳转的简单应用 <a>标签的最重要功能是实现超链接和锚点.一般来说通常认为 <a>标签最重要的作用是实现超链接,但是就功能来说还有其他的作用 ...
跳转定义_HTML中的超级链接和锚点跳转
好好学习,天天向上本章主要是HTML标签中,超级链接和锚点跳转的基础使用一.超级链接 HTML 使用超级链接与网络上的另一个文档相连. 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可 ...
html 页面怎么自动定位到某个标签,JS如何实现在页面上快速定位（锚点跳转问题）...
本文介绍了JS如何实现在页面上快速定位(锚点跳转问题),分享给大家,具体如下: 1. 锚点跳转简介锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到. 锚点跳转有两种形式: a标 ...
纯css锚点跳转过渡效果 - 神奇的scroll-behavior属性
我们在浏览网站时,经常会看到返回顶部和楼层跳转的效果,但是这些大部分都是通过js来实现的.那么不用js也可以实现吗?答案是可以的. ok,先上代码,下面再进行了解! html: <!DOCTYP ...
微信小程序实现锚点跳转
微信小程序实现锚点跳转 1.先上效果图,看看是不是你想要的. 2.主要用到的微信小程序的scroll-view 组件实现该效果.核心主要是使用scroll-into-view属性跳转对应的标签页和标签 ...
uni-app锚点跳转及滚动Tab切换(非scroll-view)
核心代码(记录当前子项距离最外层的高度) uni.createSelectorQuery().select(`#${id}`).boundingClientRect(data => { //目标 ...

【前端】HTML锚点跳转实现