angular锚点和返回顶部功能设计。

angular锚点和返回顶部功能设计。

1. 返回顶部代码
   typescrtipt代码

// 返回到顶部按钮
  @HostListener('window:scroll')
  checkScroll(): void{
    const scrollPosition = window.pageYOffset ||
      document.documentElement.scrollTop || document.body.scrollTop || 0

    if (scrollPosition >= 20) {
      this.isShowBackTop = true
    }else {
      this.isShowBackTop = false
    }
  }

  gotoTop(): void {
    window.scroll({
      top: 0,
      left: 0,
      behavior: 'smooth'
    })
  }

HTML只能部分截图了

sass部分截图

2. 锚点
注：锚点其实只是多了在HTML中使用模板变量来固定，当然还有其他方法。本教程使用模板变量。

首先在HTML中设置锚点的模板变量

然后在ts文件中使用@ViewChild获取模板变量，@HostListener监听页面滑动窗口的位置

@HostListener('window:scroll')
  checkPanel(): void {
    const scrollPosition = window.pageYOffset ||
      document.documentElement.scrollTop || document.body.scrollTop || 0
    if (scrollPosition < 400) {
        this.currentAnchor = 'selection1'
    }
    if(scrollPosition > 420){
      this.currentAnchor = 'selection2'
    }
  }
  @ViewChild('filter', { read: ElementRef}) filter!: ElementRef
  @ViewChild('minerView', { read: ElementRef}) minerView!: ElementRef
  currentAnchor = ''
  gotoFilter(): void{
    this.filter.nativeElement
      .scrollIntoView({behavior: 'smooth', block: 'start', inline: 'start'})
  }

  gotoMinerView(): void{
    this.minerView.nativeElement
      .scrollIntoView({behavior: 'smooth', block: 'start', inline: 'start'})
  }

控制面板：

mat-list用的是官网组件list，网址入下： https://material.angular.cn/components/list/overview

<div id="anchor-panel" class="mat-elevation-z4">
  <mat-list role="list">
    <mat-list-item role="listitem" (click)="gotoMinerView(); $event.stopPropagation()">
      <div class="anchor-wrap" >
        <div>矿工概览</div>
        <div class="dot-wrap" *ngIf="currentAnchor === 'selection1'">
          <div class="dot"></div>
        </div>
      </div>
    </mat-list-item>
    <mat-list-item role="listitem" (click)="gotoFilter(); $event.stopPropagation()">
      <div class="anchor-wrap">
        <div>扇区管理</div>
        <div class="dot-wrap" *ngIf="currentAnchor === 'selection2'">
          <div class="dot"></div>
        </div>
      </div>
    </mat-list-item>
  </mat-list>
</div>

sass代码：

// 锚点
#anchor-panel
  position: fixed
  top: 200px
  left: 20px
  padding: 6px
  .anchor-wrap
    cursor: pointer
    display: flex
    flex-direction: row-reverse
  .dot-wrap
    padding: 6px
    position: absolute
    left: 0
    .dot
      background-color: #3f51b5
      width: 6px
      height: 6px
      border-radius: 50%

效果展示：
在页面顶端情况

下滑页面之后

3.更多锚点设计可以借鉴
https://juejin.cn/post/6844904019958169608