Angular 14.0.2如何实现页面内锚点跳转至指定区块

Angular 路由模块默认会拦截所有<a>标签的默认跳转行为，原生写法中href="#top"的#标识会被识别为路由片段，最终触发路由跳转而非页内锚点滚动，这就是跳转路径变成localhost:4200/#top的根本原因。

以下方案均在 Angular 14.0.2 版本验证可用：

方案1：使用路由内置锚点能力（官方推荐） #

这是最符合Angular设计规范的实现方式，全局配置一次即可支持所有锚点场景。

1. 首先开启全局锚点滚动配置
   • 若使用NgModule模式开发，在根路由模块中添加配置：

   // app-routing.module.ts
   @NgModule({
     imports: [
       RouterModule.forRoot(routes, {
         anchorScrolling: 'enabled', // 开启锚点滚动
         scrollOffset: [0, 0], // 可选：配置滚动偏移量，存在固定头部导航时按需调整数值
       })
     ],
     exports: [RouterModule]
   })
   export class AppRoutingModule {}
   

   • 若使用Standalone组件模式开发，在根应用配置中添加：

   // app.config.ts
   import { ApplicationConfig } from '@angular/core';
   import { provideRouter, withInMemoryScrolling } from '@angular/router';
   
   export const appConfig: ApplicationConfig = {
     providers: [
       provideRouter(
         routes,
         withInMemoryScrolling({
           anchorScrolling: 'enabled',
           scrollOffset: [0, 0],
         })
       )
     ]
   };
   

2. 模板中使用路由绑定语法替换原生href写法：

   <!-- 目标区块保持原有id设置即可 -->
   <div id="top">目标区块内容</div>
   
   <!-- 锚点链接：空数组代表停留当前路由，fragment指定目标区块id -->
   <a [routerLink]="[]" fragment="top">回到顶部</a>
   

如果需要平滑滚动效果，只需要在全局样式中添加：

html {
  scroll-behavior: smooth;
}

方案2：单锚点快速实现（无需修改全局配置） #

如果只有少量锚点需要实现，不需要改动全局路由配置，只需要给a标签添加target="_self"属性，Angular检测到该属性后会放弃对这个链接的路由拦截，直接使用原生锚点跳转逻辑：

<div id="top">目标区块内容</div>
<a href="#top" target="_self">回到顶部</a>

这种写法和原生HTML锚点写法几乎一致，改造成本最低。

方案3：代码逻辑主动触发滚动（适合交互场景） #

如果需要在TS业务逻辑中触发锚点跳转（比如提交表单后滚动到错误提示区域、步骤条切换后滚动到对应区块），可以注入ViewportScroller工具服务手动调用滚动方法：

import { Component, inject } from '@angular/core';
import { ViewportScroller } from '@angular/common';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  private scroller = inject(ViewportScroller);

  // 业务逻辑中调用即可滚动到指定区块
  scrollToTarget(anchorId: string) {
    this.scroller.scrollToAnchor(anchorId);
  }
}

模板中可以绑定到任意交互事件上，不局限于a标签：

<div id="form-error">表单校验错误提示</div>
<button (click)="scrollToTarget('form-error')">查看错误提示</button>

内容的提问来源于stack exchange，提问作者Le Phenix 47