[Angular] 回到最上面 goTop按鈕作法

-

使用 .scrollTo({options}) 的方式
可以調用JS的smooth方式，讓滾動畫面有動畫

直接使用 .scrollTo(位置) 會有種瞬移閃現到目的地的感覺


所以看使用情境選擇使用方式



HTML


      <button mat-raised-button color="primary" (click)="goTop()">
              填完了嗎？點我回到最上方
            </button>



TS

  goTop() {
    // window.scrollTo(0, 0); // 沒動畫
    window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });

  }








參考:
https://stackoverflow.com/questions/36092212/smooth-scroll-angular2
















留言

張貼留言

這個網誌中的熱門文章

[Angular] 閒置登出作法

-
app.componemt.ts 偵測事件    //  如自動登出功能有bug 則停用以下--------    @ HostListener ( ' window:keyup ' ,  [])    @ HostListener ( ' window:click ' ,  [])    @ HostListener ( ' window:wheel ' ,  [])    @ HostListener ( ' window:mousemove ' ,  [])    resetTimer ()   {      this . authService . notifyUserAction () ;    } authService export   class   AuthService   {    isLoggedIn   =   false ;    //  ! 閒置登出時間請更改這參數的數字    endtimeSet   =   30 ;    //  這邊讓單位變成分鐘秒    endTime   =   this . endtimeSet   *   60 ;    //  store the URL so we can redirect after logging in    redirectUrl :   string ;    constructor ( private   router :   Router )   {}    //  偵...
閱讀完整內容

[JavaScript] 將array object 根據值重新 js format的作法

-
  黑魔法解法      let   arr   =  [        {   a :   1 ,   b :   1   },        {   a :   1 ,   b :   2   },        {   a :   2 ,   b :   1   },        {   a :   2 ,   b :   2   },        {   a :   2 ,   b :   3   },        {   a :   3 ,   b :   1   },        {   a :   3 ,   b :   2   },        {   a :   3 ,   b :   3   },        {   a :   3 ,   b :   4   },     ] ;     let   group   =   this . KycOptionObj . reduce ( (...
閱讀完整內容