如何在Angular中实现点击导航按钮滚动到对应组件？

完全不需要依赖jQuery，Angular本身就提供了足够的工具来实现点击导航按钮平滑滚动到对应组件的效果，而且更贴合Angular的组件化思路。下面给你两种常用的实现方式，你可以根据自己的场景选择：

方法一：使用模板引用变量 + ViewChild #

这种方式更符合Angular的组件化规范，通过模板引用直接获取目标元素：

模板代码： #

<!-- 导航栏按钮 -->
<nav class="navbar">
  <button (click)="scrollToTarget('userSection')">用户信息</button>
  <button (click)="scrollToTarget('orderSection')">订单列表</button>
  <button (click)="scrollToTarget('settingSection')">设置中心</button>
</nav>

<!-- 目标组件/区域 -->
<section #userSection class="content-section">
  <h2>用户信息</h2>
  <!-- 这里放用户信息组件的内容 -->
</section>

<section #orderSection class="content-section">
  <h2>订单列表</h2>
  <!-- 这里放订单列表组件的内容 -->
</section>

<section #settingSection class="content-section">
  <h2>设置中心</h2>
  <!-- 这里放设置中心组件的内容 -->
</section>

组件类代码： #

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-main-page',
  templateUrl: './main-page.component.html',
  styleUrls: ['./main-page.component.css']
})
export class MainPageComponent {
  // 通过模板引用变量获取对应元素
  @ViewChild('userSection') userSection!: ElementRef;
  @ViewChild('orderSection') orderSection!: ElementRef;
  @ViewChild('settingSection') settingSection!: ElementRef;

  scrollToTarget(targetName: string) {
    let targetElement: ElementRef | undefined;
    
    // 根据按钮传入的名称匹配对应的元素
    switch(targetName) {
      case 'userSection':
        targetElement = this.userSection;
        break;
      case 'orderSection':
        targetElement = this.orderSection;
        break;
      case 'settingSection':
        targetElement = this.settingSection;
        break;
      default:
        return;
    }

    // 执行平滑滚动，和你jQuery示例的动画效果一致
    targetElement?.nativeElement.scrollIntoView({
      behavior: 'smooth',
      block: 'start' // 滚动到元素顶部对齐
    });
  }
}

方法二：使用元素ID + document.querySelector #

如果你的目标区域已经有明确的ID（比如第三方组件自带ID），可以直接通过ID获取元素，写法更简洁：

模板代码： #

<nav class="navbar">
  <button (click)="scrollToById('user-section')">用户信息</button>
  <button (click)="scrollToById('order-section')">订单列表</button>
</nav>

<section id="user-section" class="content-section">
  <!-- 内容 -->
</section>

<section id="order-section" class="content-section">
  <!-- 内容 -->
</section>

组件类代码： #

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

@Component({
  selector: 'app-main-page',
  templateUrl: './main-page.component.html',
  styleUrls: ['./main-page.component.css']
})
export class MainPageComponent {
  scrollToById(elementId: string) {
    const targetElement = document.getElementById(elementId);
    if (targetElement) {
      targetElement.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  }
}

补充说明： #

• scrollIntoView的behavior: 'smooth'参数就是实现平滑滚动的关键，和你jQuery示例里的500ms动画效果类似，浏览器会自动处理动画时长；
• 如果需要自定义动画时长或者滚动偏移（比如避开固定导航栏的遮挡），可以结合Angular的Animation模块或者手动计算滚动位置后调用window.scrollTo方法；
• 只要导航栏和目标组件在同一个视图页面（不管是直接写在同一个模板里，还是通过路由懒加载到同一页面），这两种方法都能正常工作，完全适配Angular的组件化场景。

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