<main>
<h1>SCROLL 👇</h1>
<!-- Button on fixed on bottom right corner of the page -->
<button class="scrollToTopBtn">☝️</button>
</main>
<footer></footer>
* {
box-sizing: border-box;
}
body {
background-image: linear-gradient(
#d16ba5,
#e17497,
#eb828b,
#ee9183,
#eda280,
#f1ad7d,
#f3b97b,
#f3c67b,
#f8d273,
#fbdf6b,
#f9ec64,
#f4fb5f
);
}
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
scrollToTopBtn.classList.add("showBtn");
} else {
// Hide button
scrollToTopBtn.classList.remove("showBtn");
}
});
}
function scrollToTop() {
rootElement.scrollTo({
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
observer.observe(target);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.