Vollständiger Code zur Implementierung der Vue-Backtop-Komponente

<Vorlage>
 <div Klasse="Zurück nach oben">
  <div >
   <img src="imgsrc" class="line" :class="isHide? 'isHide': 'isShow'" :style="{display: (firstShow? 'block': 'none')}" @click="backTop">
  </div>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "backTop",
 Daten(){
  zurückkehren {
   firstShow: false, //Versteckte Komponenten initialisieren isHide: false,
   scrollFLag: wahr,
  }
 },
 erstellt() {
  document.addEventListener('scroll', () => {
   let scroll = document.documentElement.scrollTop
   wenn(scroll > 200){
    this.isHide = false
    this.firstShow = true
   }anders{
    dies.isHide = true
   }
  })
 },
 Methoden: {
  zurückTop(){
   wenn(dieses.scrollFLag){
    this.scrollFLag = falsch
    //Bildschirmhöhe let scroll = document.documentElement.scrollTop
    let scrollTimer = setInterval(()=> {
     scrollen -= 50
     Dokument.documentElement.scrollTop = Math.max(scroll, 0)
     wenn( scrollen <= 0){
      Intervall löschen(Scrolltimer)
     }
    }, 10)
    this.scrollFLag = true
   }
  },
 },
}
</Skript>

<style scoped lang="scss">
.zurück-oben{
 Position: fest;
 oben: 0;
 rechts: 10vw;
 Breite: 20px;
 Höhe: 500px;
 Z-Index: 200;
 .Linie{
  Breite: 12vw;
  Höhe: 100%;
  Z-Index: 20;
  Cursor: Zeiger;
  Deckkraft: 0,8;
  transformieren: verschiebeY(-100%);
  &:schweben{
   Deckkraft: 1;
  }
 }
 .isShow{
  Animation: Zurück-oben-Bewegung 0,5 s vorwärts linear, Zurück-oben-Yurayura 2 s 0,6 s vorwärts linear unendlich;
 }
 .isHide{
  Animation: Zurück-oben-ausblenden 0,5 s vorwärts linear;
 }
}

@keyframes zurück-oben-ausblenden {
 aus {
  transformieren: übersetzenY(0);
 }
 Zu {
  transformieren: verschiebeY(-100%);
 }
}

@keyframes zurück-oben-verschieben {
 Zu {
  transformieren: übersetzenY(0);
 }
}
@keyframes zurück-oben-yurayura {
 0 % {Transform-Origin: oben Mitte; Transform: Drehen (0)}
 25 % {Transform-Origin: oben Mitte; Transform: Drehen (2 Grad)}
 75 % {Transform-Origin: oben Mitte; Transform: Drehen (-2 Grad)}
 100 % {Transform-Origin: oben Mitte; Transform: Drehen (0)}
}
</Stil>