Angular中如何实现滚动页面后才显示回到顶部按钮

修改方案 #

1. 调整CSS基础样式

你当前的.to-top没有设置默认隐藏状态，先补充初始透明度配置，同时优化交互体验：

.to-top {
  bottom: 0;
  cursor: pointer;
  margin: 0 8px 12px 0;
  position: fixed;
  right: 0;
  /* 初始状态隐藏 */
  opacity: 0;
  transition: all 0.2s ease-in-out;
  /* 隐藏时不响应点击事件，避免误触 */
  pointer-events: none;
}

.show-scrollTop {
  opacity: 1;
  pointer-events: auto;
}

2. 补充TS逻辑

需要添加滚动事件监听，同时给控制显隐的变量设置初始值：

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

@Component({
  // 你原有组件的元配置保持不变
})
export class AppComponent {
  // 初始值设为false，页面加载时默认隐藏按钮
  windowScrolled = false;

  // 监听全局滚动事件
  @HostListener('window:scroll', [])
  handleScroll(): void {
    // 滚动距离超过100px时显示按钮，阈值可自行调整
    const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
    this.windowScrolled = scrollTop > 100;
  }

  scrollToTop(): void {
    document.body.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
      inline: 'start',
    });
  }
}

3. 逻辑校验

修改完成后即可满足需求：

• 页面初始加载时windowScrolled为false，不会添加show-scrollTop类，按钮默认隐藏
• 用户向下滚动距离超过设定阈值后，windowScrolled自动变为true，按钮淡入显示
• 滚动回到顶部后，按钮会自动再次隐藏

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