Zurück zum Anfang Button nur mit Javascript gemacht (Rails, Haml)

■ Einführung

Ich habe einen Artikel über die Schaltfläche "Zurück nach oben" geschrieben, der nur mit Javascript erstellt wurde. Folgendes erhalten Sie in diesem Artikel:

・ Verbessert die Grundkenntnisse in Javascript ・ Sie werden verstehen, wie Sie eine Schaltfläche erstellen, um mit Javascript nach oben zurückzukehren, ohne von jQuery abhängig zu sein.

・ Websites und Videos, auf die ich verwiesen habe → [Wenn Sie mit JS scrollen, tun Sie ◯◯! Verarbeiten wir es, indem wir es mit der Schriftrolle verknüpfen! ](Https://www.youtube.com/watch?v=_agZ_AP6W44&ab_channel=%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3 % 83% B3% E3% 83% 89% E3% 83% 81% E3% 83% A3% E3% 83% B3% E3% 83% 8D% E3% 83% AB-% E5% 9F% BA% E7% A4% 8E% E3% 81% 8B% E3% 82% 89% E5% BF% 9C% E7% 94% A8% E3% 81% BE% E3% 81% A7-% E6% AD% A6% E7% 94 % B0% E4% B8% 80% E7% 9C% 9F) → [De-jQuery] Eine Schaltfläche implementiert, um nur mit Javascript nach oben zurückzukehren

■ Code

haml:index.html.haml

.scroll#scrollValue
  %i.fas.fa-angle-up

= javascript_pack_tag 'main' -# app/javascript/packs/home/main.lese js

index.scss

.scroll {
  position: fixed;
  right: 0;
  bottom: 0;
  font-size: 2rem;
  color: #fff;
  transform: translate(-50%, -50%);
  background-color: #333;
  padding: 0 14px;
  border-radius: 50%;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
}
.scroll.top {
  visibility: visible;
  opacity: 1;
  transition: 0.5s;
}

main.js

window.addEventListener("scroll", function () {
  const scroll = document.documentElement.scrollTop; //Definieren Sie den Prozess, um den Bildlaufwert von oben im Stammelement des Dokuments mit einer Variablen abzurufen
  const PageTopBtn = document.getElementById("scrollValue");

  if (scroll > 300) {
    document.querySelector(".scroll").classList.add("top");
  } else {
    document.querySelector(".scroll").classList.remove("top");
  }

  PageTopBtn.addEventListener("click", () => {
    window.scrollTo({ //Scrollen Sie zu einer bestimmten Kombination im Dokument
      top: 0,
      behavior: "smooth", //Glatte Schriftrolle
    });
  });
});