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.
What is a scroll to top button?
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.
Use cases:
- Blogs: Assists users in easily returning to the top of the page.
- E-commerce: Facilitates users' navigation back to the top of product pages.
- Landing pages: Helps users swiftly get back to the top.
- Social media: Aids users in quickly navigating back to the beginning of the page.
- Webinars: Provides users with a convenient way to return to the top.
- News websites: Helps readers quickly return to the top to access the latest headlines.
- Forums: Assists users in navigating back to the top for the main menu or recent posts.
- Documentation: Enables users to quickly get back to the top for the table of contents.
- Portfolios: Allows visitors to easily return to the top to view other sections or contact information.
- Educational sites: Helps students return to the top to access navigation links or additional resources.
Let's write the markup
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>
Let's write the JavaScript
-
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"
});
});
Conclusion
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!
Top comments (0)