在angular 8中无限滚动按钮

npm install @angular/material @angular/cdk rxjs

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { fromEvent } from 'rxjs';
import { throttleTime, map } from 'rxjs/operators';

@ViewChild('scrollButton', { static: true }) scrollButton: ElementRef;

ngOnInit() {
  const scroll$ = fromEvent(window, 'scroll').pipe(
    throttleTime(200), // 设置滚动事件的节流时间
    map(() => window.pageYOffset) // 获取滚动位置
  );

  scroll$.subscribe((scrollPosition) => {
    if (scrollPosition > 500) {
      this.scrollButton.nativeElement.style.display = 'block';
    } else {
      this.scrollButton.nativeElement.style.display = 'none';
    }
  });
}

<button mat-raised-button #scrollButton (click)="scrollToTop()">回到顶部</button>

scrollToTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
}