Angular 17独立组件内锚点滚动功能失效问题求助

问题根源及修复步骤： #

1. 阻止a标签默认跳转行为
   你的<a href="#">点击时会触发浏览器默认锚点跳转，直接回到页面顶部，打断了自定义滚动逻辑。需要在点击事件中阻止默认行为：

修改模板中的链接代码：

<div class="form-column">
  <a href="#" (click)="scrollTo('form-container', $event)" class="heading">
    Book a Clarity Call
  </a>
</div>

同步更新组件内的scrollTo函数：

scrollTo(elementId: string, event: Event): void {
  event.preventDefault(); // 阻止默认跳转
  const element = document.getElementById(elementId);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

2. 修复代码语法错误
   组件代码的import语句存在拼写错误，需修正：

// 错误写法
import { Cimport { Component, ElementRef } from '@angular/core';

// 正确写法
import { Component, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';

3. 替代方案：改用button标签避免默认行为
   如果不想处理a标签的默认行为，可直接用button标签实现，调整样式即可：

<div class="form-column">
  <button (click)="scrollTo('form-container')" class="heading">
    Book a Clarity Call
  </button>
</div>

额外检查 #

确保目标元素<div class="post-card-container" id="form-container">确实存在于当前组件模板中，而非父组件或其他独立组件内。若目标元素不在当前组件DOM范围内，建议使用Angular的ViewChild来获取元素引用。

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