<h1>SCROLL 👇</h1>

  <!-- Button on fixed on bottom right corner of the page -->
  <button class="scrollToTopBtn">☝️</button>
* {
  box-sizing: border-box;

body {
  background-image: linear-gradient(

main {
  height: 200vmin;

h1 {
  color: white;
  font-family: system-ui, sans-serif;
  font-size: 48px;
  text-align: center;

footer {
  display: flex;
  justify-content: flex-end;
  padding: 20px;

.scrollToTopBtn {
  background-color: black;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 18px;
  line-height: 48px;
  width: 48px;

  /* place it at the bottom right corner */
  position: fixed;
  bottom: 20px;
  right: 20px;
  /* keep it at the top of everything else */
  z-index: 100;
  /* hide with opacity */
  opacity: 0;
  /* also add a translate effect */
  transform: translateY(100px);
  /* and a transition */
  transition: all 0.5s ease;

.showBtn {
  opacity: 1;
  transform: translateY(0);
// We select the element we want to target
var target = document.querySelector("footer");

var scrollToTopBtn = document.querySelector(".scrollToTopBtn");
var rootElement = document.documentElement;

// Next we want to create a function that will be called when that element is intersected
function callback(entries, observer) {
  // The callback will return an array of entries, even if you are only observing a single item
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // Show button
    } else {
      // Hide button

function scrollToTop() {
    top: 0,
    behavior: "smooth"
scrollToTopBtn.addEventListener("click", scrollToTop);

// Next we instantiate the observer with the function we created above. This takes an optional configuration
// object that we will use in the other examples.
let observer = new IntersectionObserver(callback);
// Finally start observing the target element

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.