滚动到元素时更新地址栏哈希及解决头部遮挡问题

一、同步更新地址栏 #

滚动到目标区块后，直接调用history.pushState就能更新地址栏，同时保留历史记录让用户可以回退。修改后的代码如下：

@HostListener('click', ['$event'])
onClick(e: any) {
  e.preventDefault();
  const href = e.target.getAttribute('href');
  if (!href || !href.startsWith('#')) return; // 过滤非锚点链接

  const fragmentId = href.replace('#', '');
  const fragment = document.getElementById(fragmentId);
  if (fragment) { 
    fragment.scrollIntoView({ behavior: 'smooth', block: 'start' });
    // 更新地址栏，添加历史记录
    history.pushState({ fragment: fragmentId }, '', `#${fragmentId}`);
  }
}

如果不想新增历史记录，想用当前记录替换，可以把pushState换成replaceState：

history.replaceState({ fragment: fragmentId }, '', `#${fragmentId}`);

要是用Angular内置的Location服务更贴合框架逻辑，先导入并注入服务，再调用go方法：

import { Location } from '@angular/common';

constructor(private location: Location) {}

// 在onClick里替换history.pushState为：
this.location.go(`#${fragmentId}`);

二、解决头部遮挡目标区块问题 #

方法1：CSS scroll-margin-top（最简单） #

给所有目标区块加个类，比如scroll-target，然后在全局样式里设置顶部偏移量（数值等于头部高度）：

.scroll-target {
  scroll-margin-top: 80px; /* 替换成你头部的实际高度 */
}

如果动态生成的HTML里没给元素加类，就在代码里手动添加：

fragment.classList.add('scroll-target');

之后调用scrollIntoView时，浏览器会自动留出顶部空间，不会被头部挡住。

方法2：手动计算偏移量（灵活适配动态高度） #

如果头部高度会变化，就手动计算滚动位置：

@HostListener('click', ['$event'])
onClick(e: any) {
  e.preventDefault();
  const href = e.target.getAttribute('href');
  if (!href || !href.startsWith('#')) return;

  const fragmentId = href.replace('#', '');
  const fragment = document.getElementById(fragmentId);
  const header = document.querySelector('header');
  if (fragment && header) { 
    const headerHeight = header.offsetHeight;
    // 获取元素相对于视口的顶部位置，加上当前滚动距离，再减去头部高度
    const scrollTop = window.pageYOffset + fragment.getBoundingClientRect().top - headerHeight;
    
    window.scrollTo({
      top: scrollTop,
      behavior: 'smooth'
    });

    // 更新地址栏
    history.pushState({ fragment: fragmentId }, '', `#${fragmentId}`);
  }
}

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