如何在按角度单击按钮时将列表滚动到顶部？

您能告诉我如何在按角度单击按钮时将列表滚动到顶部吗？ 我试过这样

 scrollToTop(el){
    el.scrollIntoView();
  }

  <button (click)="scrollToTop(target)">scroll to top</button>

它将列表滚动到顶部。但它隐藏了我的addressbar然后用户看不到header我认为这不是一个好的解决方案。任何人都有其他好的解决方案

这是我的代码https://stackblitz.com/edit/angular-f9qxqh?file=src%2Fapp%2Fapp.component.html

您可以通过设置滚动到列表顶部scrollTop容器的属性为零。看这次堆栈闪电战进行演示。

<div #container class="container">
  <ul>
    <li *ngFor="let i of items">{{i}}</li>
  </ul>
</div>

<button (click)="container.scrollTop = 0">scroll to top</button>

这是一个简单的方法，可以平滑地滚动到列表顶部。它是基于这个答案 by bryan60，并适配了RxJS 6。你可以尝试一下这次堆栈闪电战.

<button (click)="scrollToTop(container)">scroll to top</button>

import { interval as observableInterval } from "rxjs";
import { takeWhile, scan, tap } from "rxjs/operators";
...

scrollToTop(el) {
  const duration = 600;
  const interval = 5;
  const move = el.scrollTop * interval / duration;
  observableInterval(interval).pipe(
    scan((acc, curr) => acc - move, el.scrollTop),
    tap(position => el.scrollTop = position),
    takeWhile(val => val > 0)).subscribe();
}