Blazor中如何通过链接实现同一页面内的区块或段落锚点跳转

问题原因排查 #

你贴出的原生HTML代码本身逻辑是正确的，纯静态页面环境下可正常实现同页锚点跳转，出现跳转异常可以从以下几个常见场景排查：

• 页面<head>标签内配置了<base>标签：<base>标签会覆盖所有相对链接的默认解析规则，如果配置了<base href="/" target="_blank">这类规则，#test会被解析为根路径下的/test地址，且默认在新标签页打开。
• 项目使用了带路由功能的前端框架（Vue/React/Angular等）：路由的路径匹配逻辑会拦截#开头的hash路径，将锚点识别为路由地址进行跳转。
• 全局绑定了a标签的点击事件监听：自定义的跳转逻辑没有适配锚点场景，覆盖了原生的锚点跳转行为。

解决方案 #

针对标签场景 #

两种可选方案：

1. 移除不必要的<base>标签配置，恢复相对链接的默认解析规则
2. 编写锚点链接时拼接当前页面的完整路径，示例：

<!-- 假设当前页面地址为 https://your-domain.com/current-page -->
<a href="https://your-domain.com/current-page#test">Take me to the test paragraph.</a>

针对前端框架路由拦截场景 #

推荐直接使用JS的scrollIntoView方法实现滚动，不会触发路由跳转，兼容性更好，示例：

<a href="javascript:void(0)" onclick="document.getElementById('test').scrollIntoView({behavior: 'smooth'})">Take me to the test paragraph.</a>

如果需要保留锚点同步到地址栏的特性，可以对应框架的路由文档配置锚点规则，忽略纯hash的跳转逻辑。

针对全局点击事件拦截场景 #

排查全局绑定的点击事件逻辑，添加锚点判断分支，匹配到href属性为#开头的链接时，保留原生跳转行为或者调用scrollIntoView方法处理。

内容的提问来源于stack exchange，提问作者mohandes