How do I get back to top button in CSS?
This is going to be your sticky back-to-top button! You can see that weve added a CSS class called .top-link, and are using some simple JavaScript to make it work. Were also using an in-line SVG for the button.
Besides an SVG, you could also use an image file or font icon to create the button. We prefer the SVG method, however, because:
- It wont get pixelated at different screen sizes, like a raster image would.
- SVGs are universally supported across browsers. [Yay, user experience!]
- Its easy to style with CSS, so you can change everything about it really easily.
- It only takes one line of code, making it lightweight and better for site performance.
The last really important piece youll find in the HTML is this line:
Back to top
This is critical for users operating with screen readers, and will improve the accessibility of your WordPress site. [Think of it like an alt tag for an image, but for your scroll-to-top button!]
Now lets talk more about that CSS class, .top-link. Were using this to actually style up the button, and its where youll define qualities such as how big itll be, how much padding should be around it, the color, etc.
.top-link {
transition: all .25s ease-in-out;
position: fixed;
bottom: 0;
right: 0;
display: inline-flex;
cursor: pointer;
align-items: center;
justify-content: center;
margin: 0 3em 3em 0;
border-radius: 50%;
padding: .25em;
width: 80px;
height: 80px;
background-color: #F8F8F8;
Note: Were using Sass [a stylesheet language], to write our CSS a little bit faster. Learn more about this preprocessor here.
A couple important pieces from this snippet: transition: all .25s ease-in-out; controls how fast your button will appear or disappear on the screen, and position: fixed; is what makes the button stick to the location you want it.
Next, youll see rules for.show and .hide. Well use JavaScript to switch between these classes in order to tell the browser when the button should [or shouldnt] appear on the page.
.show {
visibility: visible;
opacity: 1;
}
.hide {
visibility: hidden;
opacity: 0;
}
Before we go into the JavaScript, there are just a few more lines well add to the CSS.
svg {
fill: #000;
width: 24px;
height: 12px;
}
&:hover {
background-color: #E8E8E8;
svg {
fill: #000000;
}
}
These classes will stylize the SVG image for the arrow itself and tell the browser how to display the button when a user hovers over it.
Finally, well add some CSS to hide the text that says back to top for screen readers.
Now on to the JavaScript! Were going to do this without loading jQuery, which will help keep your code lightweight and quick to load.
The first variable will help the browser find the button.
// Set a variable for our button element.
const scrollToTopButton = document.getElementById['js-top'];
Next, well create a function that shows the scroll-to-top button if the user scrolls beyond the height of the initial window.
const scrollFunc = [] => {
// Get the current scroll value
let y = window.scrollY;
// If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
if [y > 0] {
scrollToTopButton.className = "top-link show";
} else {
scrollToTopButton.className = "top-link hide";
}
};
Well also add an event listener, which will watch as the user scrolls [so we know where theyre at on the page].
window.addEventListener["scroll", scrollFunc];
Almost done! Next, we need to define the function that makes the button actually take the user back to the top of the page. To do that, well create a variable for the number of pixels we are from the top of the page. If that number is greater than 0, the function will set it back to 0, taking us to the top!
Well also add a little animation here, so the jump isnt too sudden.
const scrollToTop = [] => {
// Let's set a variable for the number of pixels we are from the top of the document.
const c = document.documentElement.scrollTop || document.body.scrollTop;
// If that number is greater than 0, we'll scroll back to 0, or the top of the document.
// We'll also animate that scroll with requestAnimationFrame:
// //developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
if [c > 0] {
window.requestAnimationFrame[scrollToTop];
// ScrollTo takes an x and a y coordinate.
// Increase the '10' value to get a smoother/slower scroll!
window.scrollTo[0, c - c / 10];
}
};
Last but not least, we just need to tell the page to run that function when someone clicks our sticky back-to-top button.
// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton. title = function[e] {
e.preventDefault[];
scrollToTop[];
}
Next: Discover the 19 WordPress plugins developers love
Download this ebook for a list of our most recommended plugins for developers! Weve found all of these plugins to be straightforward to use, not too performance heavy on your site, and just downright reliable.
Thats it! Youll now have a fully functioning and customizable sticky back-to-top button on your WordPress site. To see the entire tutorial in action, remember to check out this Codepen from Flywheels very own front-end engineer, Josh Masen!
Share this article
- Subscribe
Get the inspiration you need to do your best work, everySunday!
- Design trends
- HTML & CSS
- Tutorials