时间戳

首页 > 解决方案 > Angular - 按钮滚动到顶部

angular - Angular - 按钮滚动到顶部

问题描述

我开发了一个图片库。有没有办法在页面上滚动时，我会看到一个按钮，当点击它时，所有的滚动都到了顶部（页面的开头）？

我已经测试了一些我发现的案例，但到目前为止没有一个有效:(有人可以帮助我吗？

闪电战

代码

  <ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;">
    <li class="mdc-image-list__item" *ngFor="let product of Images; let  j = index;">
      <div class="mdc-image-list__image-aspect-container">
          <img [src]="product.image" class="mdc-image-list__image">
      </div>
    </li>
  </ul>

标签： angulartypescriptscrollscrolltop

解决方案

使用 hostListener 监听窗口滚动事件，然后使用 angular ViewPortScroller 服务，该服务提供scrollToPostion方法使用该方法滚动到指定位置。

试试这个：

组件.ts

@HostListener('window:scroll', ['$event']) onScroll(event){
    this.pageYoffset = window.pageYOffset;
 }

constructor(private scroll: ViewportScroller) { }

scrollToTop(){
    this.scroll.scrollToPosition([0,0]);
}

工作示例

推荐阅读