Angular点击固定按钮后API调用触发页面自动滚动问题排查

问题原因 #

点击fixed定位的按钮后，浏览器会自动将焦点设置到该按钮上。后续API调用触发视图更新时，浏览器的焦点可见性维护机制会尝试让焦点元素保持在视口内——虽然fixed定位的按钮本来就固定在底部无需滚动，但浏览器的逻辑误判会触发页面滚动到底部。当按钮改为relative时，它属于文档流的一部分，焦点不会触发强制滚动到元素位置的行为，因此问题消失。

解决方法 #

方法1：点击后主动移除按钮焦点 #

修改按钮的点击事件处理函数，在点击后让按钮失焦：

openOSP(event: MouseEvent) {
  // 保留原有业务逻辑（如果有）
  const target = event.target as HTMLElement;
  target.blur(); // 移除焦点
}

方法2：让按钮无法获取焦点 #

给按钮添加tabindex="-1"属性，阻止其成为焦点元素，从根源避免触发滚动逻辑：

<button *ngIf="logistic.getPermission('open_shipment_button')" 
        class="btn btn-secondary mybutton" 
        type="button" 
        (click)="openOSP($event)"
        tabindex="-1">
  Open Shipment Pool
  <span *ngIf="draggables?.length > 0" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    {{draggables?.length}}
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

方法3：兜底方案——恢复滚动位置 #

如果前两种方法不适用，可以在API调用前记录当前滚动位置，调用完成后强制恢复：

// 发起API调用前记录滚动位置
const currentScrollPos = window.scrollY;

this.yourApiService.yourMethod().subscribe({
  next: (data) => {
    // 处理返回数据
    // 恢复滚动位置
    window.scrollTo({
      top: currentScrollPos,
      behavior: 'auto' // 无动画，避免突兀
    });
  },
  error: (err) => {
    // 错误处理
  }
});

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