vue backtop コンポーネントを実装するための完全なコード

<テンプレート>
 <div class="back-top">
  <div> 要素
   <img src="imgsrc" class="line" :class="isHide? 'isHide': 'isShow'" :style="{display: (firstShow? 'block': 'none')}" @click="backTop">
  </div>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前: "backTop",
 データ（）{
  戻る {
   firstShow: false, //非表示のコンポーネントを初期化する isHide: false,
   スクロールフラグ: true、
  }
 },
 作成された() {
  document.addEventListener('スクロール', () => {
   scroll = document.documentElement.scrollTop とします。
   if(スクロール > 200){
    this.isHide = false
    this.firstShow = true
   }それ以外{
    this.isHide = true
   }
  })
 },
 メソッド: {
  戻るトップ(){
   if(this.scrollFLag){
    this.scrollFLag = false
    //画面の高さ let scroll = document.documentElement.scrollTop
    scrollTimer = setInterval(()=> { を設定します。
     スクロール -= 50
     document.documentElement.scrollTop = Math.max(スクロール、0)
     if(スクロール <= 0){
      クリア間隔(スクロールタイマー)
     }
    }, 10)
    this.scrollFLag = true
   }
  },
 },
}
</スクリプト>

<スタイル スコープ lang="scss">
.back-top{
 位置: 固定;
 上: 0;
 右：10vw;
 幅: 20px;
 高さ: 500px;
 zインデックス: 200;
 。ライン{
  幅: 12vw;
  高さ: 100%;
  zインデックス: 20;
  カーソル: ポインタ;
  不透明度: 0.8;
  変換: translateY(-100%);
  &:ホバー{
   不透明度: 1;
  }
 }
 .isShow{
  アニメーション: back-top-move 0.5s forwards linear、back-top-yurayura 2s 0.6s forwards linear infinite;
 }
 .isHide{
  アニメーション: 戻る-上-非表示 0.5 秒前へ線形;
 }
}

@keyframes 戻る上部非表示 {
 から {
  変換: translateY(0);
 }
 に {
  変換: translateY(-100%);
 }
}

@keyframes 戻るトップ移動 {
 に {
  変換: translateY(0);
 }
}
@keyframes バックトップユラユラ {
 0%{transform-origin: 上中央;transform: rotate(0)}
 25%{transform-origin: 上部中央;transform: rotate(2deg)}
 75%{transform-origin: 上部中央;transform: rotate(-2deg)}
 100%{transform-origin: 上部中央;transform: rotate(0)}
}
</スタイル>