Angular路由页面滚动功能失效，跳转至主页问题求助

问题描述 #

我有一个双语Angular项目，包含主页面和一个路由组件，二者内容一致但语言不同，且各自设置了不同的锚点ID。主页面的导航链接可以正常滚动到对应区域，但路由页面的导航点击后会直接跳转到主页面，无法在当前路由页面内滚动到目标区域。怀疑是路径或路由配置导致的问题，此前曾修改过路由模块但不太理解改动影响。

相关代码 #

主页面导航（可正常滚动） #

<nav class="navbar navbar-expand-lg bg-dark fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="https://www.argentina.gob.ar/economia/conocimiento/argentina-programa" target="_blank">
            <img src="../../../assets/APLogo.png"  alt="" width="110" height="60" class="d-inline-block align-text-top">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link link-light" href="#acerca-de">Sobre mi</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

主页面目标区域 #

<section class="container-fluid about-section" id="acerca-de">
    <div class="row">
        <div class="col-md">
            <img src="../../../assets/foto-de-perfil.jpg" class="img-fluid perfil" alt="foto de perfil">
        </div>
        <div class="tarjeta col-md" >
            <h2 class="titulo" >About me</h2>
            <h3>Hello! I'm Bob the builder <br><br> <span class="presentacion"> blabla </span></h3>
            <p class="card-text" id="text-acercade">blabla</p>
        </div>
    </div>
</section>

路由页面导航（滚动失效） #

<nav class="navbar navbar-expand-lg bg-dark fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="https://www.argentina.gob.ar/economia/conocimiento/argentina-programa" target="_blank">
            <img class="logo-english" src="../../../assets/APLogo.png"  alt="" width="110" height="60" class="d-inline-block align-text-top">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link link-light" href="#about">About me</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

路由页面目标区域 #

<section class="container-fluid about-section" id="about">
    <div class="row">
        <div class="col-md">
            <img src="../../../assets/foto-de-perfil.jpg" class="img-fluid perfil" alt="foto de perfil">
        </div>
        <div class="tarjeta col-md" >
            <h2 class="titulo" >About me</h2>
            <h3>Hello! I'm Bob the builder <br><br> <span class="presentacion">blabla</span></h3>
            <p class="card-text" id="text-acercade">blabla</p>
        </div>
    </div>
</section>

解决方案 #

方案1：启用Angular Router内置锚点滚动 #

Angular的路由机制会拦截原生锚点链接，默认跳转到根路由的对应ID，需要配置路由启用锚点滚动：

1. 修改app-routing.module.ts，添加滚动配置：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { EnglishComponent } from './english/english.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'english', component: EnglishComponent }, // 替换为你的路由页面实际路径
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled',
    scrollOffset: [0, 60] // 适配固定导航栏高度，避免目标区域被遮挡
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 修改路由页面的导航链接，使用routerLink和fragment：

<li class="nav-item">
    <a class="nav-link link-light" [routerLink]="['/english']" fragment="about">About me</a>
</li>

注意：['/english']需替换为你的路由页面实际路径，比如路由为/en则写['/en']。

方案2：手动实现滚动（兼容所有场景） #

如果Router内置方案不生效，可通过点击事件手动触发滚动：

1. 修改路由页面的导航链接，添加点击事件并阻止默认行为：

<li class="nav-item">
    <a class="nav-link link-light" href="#about" (click)="scrollToSection($event, 'about')">About me</a>
</li>

2. 在路由组件的.ts文件中实现滚动方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-english',
  templateUrl: './english.component.html',
  styleUrls: ['./english.component.css']
})
export class EnglishComponent {
  scrollToSection(event: Event, sectionId: string): void {
    event.preventDefault(); // 阻止默认跳转行为
    const targetElement = document.getElementById(sectionId);
    if (targetElement) {
      // 平滑滚动到目标区域
      targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
}

方案3：检查路由配置正确性 #

确保路由模块中，主页面和路由页面的路径无冲突，比如主页面为默认空路径''，路由页面为独立子路径（如/english），避免路由重定向导致跳转到主页面。

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