Angular实现：页面加载时依据URL片段自动滚动至指定区域

要实现页面加载时识别URL中的片段并自动滚动到对应区域，只需要在组件初始化阶段提取URL的hash值，然后调用你已有的scrollToSection函数即可。以下是具体实现方案：

基础实现：页面初始化时处理hash #

利用Angular的ngAfterViewInit钩子（确保DOM元素已渲染完成），提取URL中的hash片段并触发滚动：

import { Component, AfterViewInit } from '@angular/core';
// 导入你的navigationService

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements AfterViewInit {
  constructor(private navigationService: NavigationService) {}

  ngAfterViewInit(): void {
    // 提取hash并去掉开头的#
    const sectionId = window.location.hash.slice(1);
    if (sectionId) {
      this.scrollToSection(sectionId);
    }
  }

  public scrollToSection(sectionId: string): void {
    const targetElement = document.getElementById(sectionId);
    if (targetElement) {
      const navHeight = this.navigationService.getNavHeight();
      const yPosition = targetElement.getBoundingClientRect().top + window.scrollY - navHeight;
      window.scrollTo({ top: yPosition, behavior: 'smooth' });
    }
  }
}

进阶：处理路由变化时的hash更新 #

如果用户在同一页面内导航（比如通过路由链接修改URL hash），需要监听路由事件确保每次hash变化都能触发滚动：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
// 导入你的navigationService

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  constructor(
    private router: Router,
    private navigationService: NavigationService
  ) {}

  ngOnInit(): void {
    // 监听路由导航完成事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      const sectionId = window.location.hash.slice(1);
      if (sectionId) {
        // 加小延迟确保DOM更新完成，避免找不到元素
        setTimeout(() => {
          this.scrollToSection(sectionId);
        }, 100);
      }
    });
  }

  public scrollToSection(sectionId: string): void {
    const targetElement = document.getElementById(sectionId);
    if (targetElement) {
      const navHeight = this.navigationService.getNavHeight();
      const yPosition = targetElement.getBoundingClientRect().top + window.scrollY - navHeight;
      window.scrollTo({ top: yPosition, behavior: 'smooth' });
    }
  }
}

兼容服务器端渲染（SSR） #

如果你的应用使用SSR，直接访问window会报错，需要先判断当前环境是否为浏览器：

import { Component, OnInit, Inject } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
// 导入你的navigationService

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private router: Router,
    private navigationService: NavigationService
  ) {}

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      this.router.events.pipe(
        filter(event => event instanceof NavigationEnd)
      ).subscribe(() => {
        const sectionId = window.location.hash.slice(1);
        if (sectionId) {
          setTimeout(() => {
            this.scrollToSection(sectionId);
          }, 100);
        }
      });
    }
  }

  public scrollToSection(sectionId: string): void {
    if (isPlatformBrowser(this.platformId)) {
      const targetElement = document.getElementById(sectionId);
      if (targetElement) {
        const navHeight = this.navigationService.getNavHeight();
        const yPosition = targetElement.getBoundingClientRect().top + window.scrollY - navHeight;
        window.scrollTo({ top: yPosition, behavior: 'smooth' });
      }
    }
  }
}

这样不管是直接访问带hash的URL，还是页面内导航修改hash，都能自动触发平滑滚动到目标区域。

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