Remember the scroll to top button that we did with only Tailwind CSS then with Alpine JS? Well today we are recreating it with vainilla JavaScript.
A scroll-to-top button is a feature that appears at the bottom of a webpage once the user scrolls down. It enables the user to quickly return to the top of the page, which is particularly helpful for sites with extensive content, enhancing user navigation.
Understanding the code
Th button is hidden by default and will only be shown when the user scrolls down.
id="scrollButton"
is the id of the button. This is used to identify the button in JavaScript.fixed
: This is a CSS property that positions the button at the bottom of the page.bottom-6
: This is a Tailwind CSS utility that sets the bottom position of the button to 6 pixels from the bottom of the page.right-6
: This is a Tailwind CSS utility that sets the right position of the button to 6 pixels from the right side of the page.z-50
: This is a CSS property that sets the z-index of the button to 50.hidden
: This is a CSS property that hides the button by default. It is only shown when the user scrolls down.transition-opacity
: This is a Tailwind CSS utility that adds a transition effect to the opacity property of the button.duration-300
: This is a Tailwind CSS utility that sets the duration of the transition effect to 300 milliseconds.transform
: This is a CSS property that applies a transformation to the button.translate-y-2
: This is a Tailwind CSS utility that translates the button vertically by 2 pixels.opacity-0
: This is a CSS property that sets the opacity of the button to 0.<div id="scrollButton" class="fixed bottom-6 right-6 z-50 hidden transition-opacity duration-300 transform translate-y-2 opacity-0">
<button> scroll to top </button>
</div>
document.addEventListener("scroll", () => {
is the event listener that will be added to the document object.const scrollButton = document.getElementById("scrollButton");
is the code that will be used to get the element with the id of “scrollButton”.if (window.scrollY > 100) {
is the condition that will be checked when the user scrolls down.scrollButton.classList.remove("hidden", "opacity-0", "translate-y-2");
is the code that will be used to remove the “hidden”, “opacity-0”, and “translate-y-2” classes from the scrollButton element.scrollButton.classList.add("opacity-100", "translate-y-0");
is the code that will be used to add the “opacity-100” and “translate-y-0” classes to the scrollButton element.} else {
is the code that will be used when the user scrolls up.scrollButton.classList.add("opacity-0", "translate-y-2");
is the code that will be used to add the “opacity-0” and “translate-y-2” classes to the scrollButton element.scrollButton.classList.remove("opacity-100", "translate-y-0");
is the code that will be used to remove the “opacity-100” and “translate-y-0” classes from the scrollButton element.setTimeout(() => {
is the code that will be used to add the “hidden” class to the scrollButton element after 300 milliseconds.if (window.scrollY <= 100) {
is the condition that will be checked when the user scrolls up.scrollButton.classList.add("hidden");
is the code that will be used to add the “hidden” class to the scrollButton element.}, 300);
is the code that will be used to remove the “hidden” class from the scrollButton element after 300 milliseconds.}
is the code that will be used to close the “setTimeout” function.document.getElementById("scrollButton").addEventListener("click", () => {
is the event listener that will be added to the scrollButton element.window.scrollTo({
is the code that will be used to scroll the page to the top.top: 0,
is the code that will be used to set the top position of the page to 0.behavior: "smooth"
is the code that will be used to scroll the page smoothly.document.addEventListener("scroll", () => {
const scrollButton = document.getElementById("scrollButton");
if (window.scrollY > 100) {
scrollButton.classList.remove("hidden", "opacity-0", "translate-y-2");
scrollButton.classList.add("opacity-100", "translate-y-0");
} else {
scrollButton.classList.add("opacity-0", "translate-y-2");
scrollButton.classList.remove("opacity-100", "translate-y-0");
setTimeout(() => {
if (window.scrollY <= 100) {
scrollButton.classList.add("hidden");
}
}, 300);
}
});
document.getElementById("scrollButton").addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
In this tutorial, we created a scroll to top button using Tailwind CSS and JavaScript. We added an event listener to the window object to detect when the user scrolls down and up. We also added a condition to check if the user has scrolled down or up and added or removed the “hidden”, “opacity-0”, and “translate-y-2” classes from the scrollButton element. Finally, we added a setTimeout function to add the “hidden” class to the scrollButton element after 300 milliseconds.
After all of this JavaScript code, something that we need to know is that, we can simply do this with anchor links and a little bit of CSS. We can use the id
attribute to link to the top of the page and then use CSS to make the link look like a button.
Like this:
<a href="#top" class="scroll-to-top">Up</a>
Hope you enjoyed this tutorial and have a great day!
/Michael Andreuzza
"I bought a beautiful theme from Lexington a couple weeks ago. I didn't know Astro at the time, but Michael helped me get set up and really went above and beyond with his support. Now I'm happily redoing my site to look gorgeous with his template."
Stuart
Creator of saasydb.com
"Michael is one of the best designers on Twitter, would highly recommend his Lexington Themes if you want something in tailwind that doesn’t look the same as everyone else!"
Alex Hughes
letsloopin.com
Get lifetime access to every theme available today for $199 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
No subscription required!
Beautifully designed HTML, Astro.js and Tailwind themes! Save months of time and build your startup landing page in minutes.