在Angular中滚动后如何使滚动到顶部按钮出现

Question

我已经从我的 Angular 项目中创建了一个滚动到顶部组件，我试图让我的滚动图像仅在用户向下滚动后出现，但我的按钮仍然出现在初始加载中，所以任何想法或建议我怎么能做到这一点

所以我想做的是，

1. 页面加载时，不显示滚动图标
2. 当用户向下滚动页面时，显示滚动图标

HTML

<div class="to-top" (click)="scrollToTop()" [ngClass]="{ 'show-scrollTop': windowScrolled }">
  <img src="../../../../assets/marketing-site/ecosystem/Scroll-to-Top.svg" alt="to-top-icon" />
</div>

CSS

.to-top {
  bottom: 0;
  cursor: pointer;
  margin: 0 8px 12px 0;
  position: fixed;
  right: 0;
}

.show-scrollTop {
  opacity: 1;
  transition: all 0.2s ease-in-out;
}

TS

  scrollToTop(): void {
    // scroll to the top of the body
    return this.document.body.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
      inline: 'start',
    });
  }

这是我创建的示例，请查看

https://stackblitz.com/edit/angular-ivy-2d5jrt?file=src/app/app.component.html

Answer 1

你的表情

if (window.pageXOffset || document.documentElement.scrollTo || document.body.scrollTop > 20) {
      this.windowScrolled = true;
} 

总是正确的。你的意思可能是这样的

if( window.pageXOffset > 20 || document.body.scrollTop > 20) {}

document.documentElement.scrollTo 是一个函数，所以在我认为的条件下检查它是否存在是没有意义的。

Answer 2

CSS

.to-top {
  bottom: 0;
  cursor: pointer;
  margin: 0 8px 12px 0;
  position: fixed;
  right: 0;
  opacity: 0;
}

.show-scrollTop {
  opacity: 1 !important;
  transition: all 0.2s ease-in-out;
}

TS

  windowScrolled = false;

  ngOnInit() {
    window.addEventListener('scroll', () => {
      this.windowScrolled = window.pageYOffset !== 0;
    });
  }

这应该可以完成工作。

另外，我更喜欢滚动：

  scrollToTop(): void {
    window.scrollTo(0, 0);
  }