Pop-up Back To Top Button.

index.html

<button id="back-to-top-btn" class="animate__animated" title="↑ Back To Top ↑"><i class="fas fa-angle-double-up"></i></button>

<div class="content">
  <h1 class="heading">Scroll to top button.</h1>
  <hr>
  <p class="para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate earum nihil quam eius eveniet, hic architecto excepturi ab quos qui, animi aut velit consequatur doloribus cumque odit perferendis. Eveniet vitae, veritatis reprehenderit fuga saepe tempore sit aliquam beatae magnam ratione quaerat, aperiam dolore consequuntur reiciendis at nesciunt itaque cupiditate quisquam! Cumque perspiciatis laboriosam accusantium obcaecati laborum saepe ea nam iusto. Soluta excepturi assumenda itaque ea voluptatum, repellendus nesciunt unde qui repudiandae modi obcaecati quos quasi, illum, adipisci optio expedita aliquam dolor aperiam eius sed nobis deleniti. Porro, dignissimos cum vitae possimus magnam, ratione nulla laudantium similique deserunt ipsa tenetur in?</p>
  <p class="para">Aut in obcaecati nihil molestiae voluptatum error, aliquid nemo rem quo. Nam obcaecati placeat modi aut dolores incidunt nesciunt qui molestias? Excepturi quia officiis dolores error laboriosam impedit repudiandae molestiae nisi! Nam quos repudiandae sint quibusdam iste numquam incidunt libero. Laborum tempora dignissimos deleniti quod aliquam corrupti incidunt natus voluptates officiis, odio et commodi modi? Temporibus unde aliquam animi id, eius minus voluptas ad repellat sint molestiae, earum, alias et velit! Soluta quia neque ea doloribus. Incidunt sapiente vel inventore neque asperiores odit non eveniet? Blanditiis hic quibusdam quis minima. Sint voluptatibus odio tempora, fugit quos in pariatur repudiandae numquam!</p>
  <p class="para">Voluptatibus debitis inventore corrupti eius molestiae impedit vel earum nesciunt saepe modi ullam voluptates, accusantium explicabo illo tempore quas esse odio nam voluptatem officia quibusdam eligendi. Quae ut quis obcaecati, nostrum praesentium illo aut magni, dolor mollitia tenetur tempora nemo vero autem totam error aperiam ipsam sed labore libero temporibus nulla facilis impedit. Consectetur accusantium aliquid praesentium! Beatae odit corrupti at dignissimos facere voluptatibus nostrum et aperiam tempore. Quasi eos reiciendis eius, quis dignissimos deserunt nulla rerum? Dolorum, tempora repudiandae quibusdam nobis mollitia temporibus? Labore quasi eligendi tempora animi aspernatur possimus neque itaque, maiores libero officia doloribus nulla id molestiae.</p>
  <p class="para">Dolores enim eligendi consectetur facilis, nesciunt ut quisquam laborum vel, ipsum nisi laudantium optio similique sint voluptatum, natus in. Eos sed impedit quos nemo qui. Quam molestias, quaerat voluptates neque at distinctio, perspiciatis eaque iure vel eum nulla excepturi veritatis saepe vitae suscipit hic dignissimos nihil quia. Quia nesciunt aspernatur nihil vel id cumque eius quos suscipit itaque sint omnis iure, libero eos dolor consectetur iste. Maiores possimus id necessitatibus explicabo fuga tempore nam itaque saepe nobis. Autem repellat asperiores dolores dicta impedit, earum quis quas mollitia dolorem deleniti tempore culpa minima. Minus provident accusamus nostrum rem cumque repellendus repellat.</p>
  <p class="para">Facere a officiis ducimus rem ipsam nobis soluta aspernatur mollitia culpa natus nulla aut sunt quae maxime nemo error nihil delectus possimus molestiae qui, velit quisquam accusantium! Consequatur quod officiis itaque. Delectus quia consectetur id earum blanditiis! Itaque quos dolorum in nam nobis id, autem odio nesciunt esse perferendis? Earum, odio corrupti possimus ad tenetur, accusamus in eveniet magni magnam voluptates illum! Fugiat reiciendis facilis quas at maiores eaque? Alias possimus accusamus debitis nesciunt sunt mollitia ullam ipsam sapiente quam quisquam in aut, iste quae ipsum, molestias quo incidunt, doloremque cum sequi. Autem assumenda nam dicta, voluptatum porro odit praesentium.</p>
  <p class="para">Voluptatum, sunt? Ab velit veniam libero tenetur autem! Quisquam quos quaerat tempore, molestias expedita ratione, dicta voluptas optio consequatur eaque natus. Placeat accusamus dolorem sapiente quibusdam quia incidunt aspernatur ipsa est maxime iste numquam exercitationem libero veniam ab, magnam soluta unde. Enim odit provident maiores ab tempore! Perferendis deserunt voluptatem veritatis aspernatur quia, est voluptas quis dolores esse odit recusandae minima, quidem delectus nisi ducimus distinctio. Numquam, tempore perspiciatis sed praesentium debitis aspernatur error blanditiis in odit possimus reiciendis explicabo? Perspiciatis optio cupiditate, explicabo quia similique amet debitis neque voluptate cumque corrupti beatae? Provident suscipit id consequatur perferendis nostrum ullam.</p>
  <p class="para">Deserunt dignissimos enim pariatur id iure alias assumenda voluptas. Neque hic optio, iste impedit vel nam rerum dolor ad sunt animi nobis voluptate, voluptatibus consectetur nihil? Consequatur dolor ad debitis, molestias dicta maxime sequi reiciendis expedita nesciunt illum necessitatibus, totam ipsa ipsam laboriosam aspernatur quia eos delectus, iusto omnis repellendus non accusamus tempora. Recusandae illo et fuga a doloremque quasi voluptate! Neque saepe enim culpa? Facilis quaerat iure nemo quae labore culpa consequatur cumque, ipsum laboriosam adipisci optio officia repudiandae sint tempora reprehenderit quis rem eius quod. Voluptatum, excepturi. Maxime ipsum quidem porro placeat! In molestiae nostrum minus facilis facere?</p>
  <p class="para">Vitae quam reprehenderit ullam, voluptas molestiae non facilis quae incidunt dicta natus perferendis consectetur debitis cupiditate assumenda laudantium similique veniam dolorum deserunt iste corrupti totam veritatis, nostrum a consequuntur! Inventore architecto omnis tempore doloremque unde illum corporis at mollitia suscipit est! Eius aliquam quisquam, nihil dolorum quae quibusdam atque dolor a exercitationem non excepturi repudiandae repellat beatae corporis vitae, consequuntur at ut officia illum quam doloremque iste maxime aut. Ex iure similique dignissimos odit autem, iste consequatur, perspiciatis dolores quo officia veniam laudantium dolorem quaerat perferendis sed fugit, quam accusamus cum tempore necessitatibus est magni! Consequatur ducimus et repudiandae illo!</p>
  <p class="para">In saepe libero mollitia nostrum quia quibusdam corrupti magnam, id nesciunt pariatur odio ullam hic ipsam nulla, earum a placeat exercitationem distinctio rerum, ipsa iste magni quisquam eum natus? Deserunt, nisi vitae omnis sed earum enim soluta ullam ea ipsum minus harum velit optio fugit, quia eaque recusandae cumque impedit iste! Aliquam doloremque sunt corrupti numquam at accusamus inventore libero quasi soluta provident sapiente rerum atque consectetur minima, officia labore explicabo quisquam expedita nulla obcaecati aliquid ratione quas adipisci ut? Earum asperiores consequuntur pariatur dignissimos, quam soluta minus quis eius? Minus corrupti hic eius, neque labore harum doloribus. Eum, pariatur.</p>
  <p class="para">Expedita exercitationem reiciendis temporibus ab nostrum fugit esse. Nulla velit aliquid labore nam fuga ipsam odit reprehenderit atque quis facere voluptatibus itaque vero error placeat, sequi culpa ipsa consequatur dolore qui tempore consequuntur provident harum delectus! Eaque accusamus, numquam suscipit sed, voluptatem ducimus saepe sint quae quidem consequatur modi illum ex molestias doloremque quo inventore sunt eos! Blanditiis, nostrum numquam pariatur aperiam dolorum exercitationem ut id, perspiciatis voluptatem repellat ab? Expedita ducimus odio vitae placeat ullam repudiandae! Nobis aliquid saepe modi perferendis placeat consequuntur repudiandae dolorum nisi, animi dicta consequatur necessitatibus ullam corrupti commodi ea, suscipit quibusdam id. Quae, veritatis?</p>
</div>

Pop-up Back To Top Button

Title of the gist.

pop-up-back-to-top-button.markdown

Pop-up Back To Top Button.

A Pen by Krish Garg on CodePen.

License.

script.js

const button = document.getElementById("back-to-top-btn");

window.addEventListener("scroll", scrollHandle);

function scrollHandle() {
  if (window.scrollY > 400) {
    if (!button.classList.contains("animate__backInUp")) {
      button.classList.remove("animate__backOutDown");
      button.classList.add("animate__backInUp");
      button.style.display = "block";
    }
  } else {
    if (button.classList.contains("animate__backInUp")) {
      button.classList.remove("animate__backInUp");
      button.classList.add("animate__backOutDown");
      setTimeout(() => {
        button.style.display = "block";
      }, 1000);
    }
  }
}

button.addEventListener("click", () => {
  window.scrollTo({
    top: 0
  });
});

style.css

html {
  background-color: #000;
  scroll-behavior: smooth;
}

.content {
  color: #fff;
  margin: 0px;
  padding: 10px 100px;
  font-size: 20px;
  text-align: center;
}

.heading {
  font-family: Monospace, sans-sarif;
  text-align: center;
}

.para {
  padding: 20px 0px;
  font-size: 40px;
}

#back-to-top-btn {
  display: none;
  background-color: #000;
  color: #fff;
  outline: none;
  position: fixed;
  bottom: 25px;
  right: 25px;
  height: 50px;
  width: 50px;
  border: 3px solid white;
  font-size: 25px;
  border-radius: 50%;
  transition-element: background-color, color, display;
  transition-duration: 0.3s;
  transition-effect-function: ease-in-out;
}

#back-to-top-btn:hover {
  cursor: pointer;
  background-color: #fff;
  color: #000;
}