How To Add Scroll To Top Button On Website

We've all been there. You've found a fantastic online guide, scrolled alllllllll the fashion to the bottom, and then retrieve, "Wow, I'd honey to see what else this site has to offer!"

But then you have to scroll.

ALL.

THE.

Way.

TO.

THE.

TOP.

And then you lot think…. "Hmmm, nevermind." And close the page.

Equally a spider web designer, this is just about the concluding matter you desire someone to practise when they country on a site you're edifice. Luckily, the year is 2019 and modernistic spider web pattern best practices have given us the solution to this mutual UX trouble: the sticky back-to-top button.

What is a sticky dorsum-to-top push?

Likewise known as a curl-to-tiptop button or become-to-height image, the sticky back-to-pinnacle button is a helpful navigation element that helps users become back to the peak of the spider web page they're viewing. A common UI pattern is to place this button in the lower right-hand corner of the screen, making information technology "pasty" via a fixed position so it'southward always accessible as the user scrolls downwardly the folio.

Things to consider before adding a back-to-top button

Like any popular design trend, I encourage y'all to have a step dorsum before implementing information technology on your site to inquire yourself: If I'thou going to build this, what back-summit-push button guidelines practice I need to follow?

Hither are a few questions to answer earlier you build your scroll-to-tiptop button:

Where will it be placed?
How big (or pocket-size) should information technology be?
What design patterns should yous follow so it stays on make? (Retrieve colors, fonts, icons, etc.)
Is it at take chances of covering important site content, such as information in a sidebar?
What happens on mobile devices? Will it be responsive?
Do you actually demand information technology?*

*Notation: You could make the argument that users today are conditioned to scroll down (and back up!) on a page, which would eliminate the "demand" for a back-to-height push button. My advice: Examination it! Add together a Google Analytics event on click or use a heatmap tool like Hotjar to see how your site visitors appoint with the page.

The best "all-time practice" to follow is one based on information from your ain site and users!

How to add together a gluey dorsum-to-top push to your WordPress site

In this tutorial, I'll show you how to add the exact dorsum-to-top push button we employ here on Layout! The but difference is that we placed ours in a sticky header on the acme of the screen, instead of the lower right-hand corner. (But don't worry, information technology'southward the same concept!)

Pro-tip: While this tutorial isn't as well advanced, I still recommend trying it out on a staging site or local surroundings, and so in that location's absolutely no risk to your live site. If you demand to gear up 1 upwardly quick, cheque out Local, a free local WordPress app that'southward incredibly easy to utilize.

Let's get started! I'll walk through each step of the procedure, and y'all tin also follow this Codepen from Flywheel's very ain front end-end engineer, Josh Masen.

Or, check out this video tutorial of adding a sticky back-to-pinnacle push button!

Come across the Pen ES6 Scroll-to-top button by Josh Lawler (@joshuamasen) on CodePen.

For this gluey dorsum-to-top button tutorial, nosotros'll use three languages:

HTML for the markup to create the button
CSS to way the button and have it match your make
JavaScript to brand information technology "work" and define the behaviors of the push

In the HTML, you'll notice the post-obit lines:

<a grade="top-link hibernate" href="" id="js-top">   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 half dozen"><path d="M12 6H0l6-6z"/></svg>   <span course="screen-reader-text">Dorsum to acme</span> </a>

This is going to be your sticky back-to-meridian button! You can see that we've added a CSS class chosen .top-link, and are using some uncomplicated JavaScript to "brand it work." We're also using an in-line SVG for the push.

Likewise an SVG, y'all could also use an image file or font icon to create the button. Nosotros adopt the SVG method, all the same, because:

It won't become pixelated at unlike screen sizes, like a raster prototype would.
SVGs are universally supported beyond browsers. (Yay, user feel!)
It's easy to manner with CSS, and so you can change everything well-nigh it really easily.
It only takes i line of code, making it lightweight and better for site performance.

The final actually important slice you'll detect in the HTML is this line:

<bridge class="screen-reader-text">Back to top</bridge>

This is critical for users operating with screen readers, and volition meliorate the accessibility of your WordPress site. (Think of it like an alt tag for an image, simply for your scroll-to-acme push!)

Now let'due south talk more than nearly that CSS form, .top-link. Nosotros're using this to actually style up the button, and it'south where you lot'll define qualities such every bit how big it'll 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: arrow;  align-items: center;  justify-content: center;  margin: 0 3em 3em 0;  edge-radius: 50%;  padding: .25em;  width: 80px;  height: 80px;  background-colour: #F8F8F8;

Note: Nosotros're using Sass (a stylesheet language), to write our CSS a trivial bit faster. Learn more than about this preprocessor here.

A couple important pieces from this snippet: transition: all .25s ease-in-out; controls how "fast" your push button will announced or disappear on the screen, and position: fixed; is what makes the button "stick" to the location you want it.

Next, you'll see rules for.show and .hide. We'll use JavaScript to switch between these classes in order to tell the browser when the button should (or shouldn't) appear on the page.

              .show {     visibility: visible;     opacity: 1;   }      .hide {     visibility: hidden;     opacity: 0;   }

Earlier we go into the JavaScript, in that location are but a few more lines we'll add to the CSS.

svg {  fill: #000;  width: 24px;  height: 12px; }  &:hover {  background-color: #E8E8E8;   	svg { 	 make full: #000000; 	} }

These classes will stylize the SVG image for the arrow itself and tell the browser how to brandish the push when a user hovers over information technology.

Finally, nosotros'll add some CSS to hide the text that says "back to pinnacle" for screen readers.

// Text meant only for screen readers. .screen-reader-text { 	position: absolute; 	prune-path: inset(50%); 	margin: -1px; 	border: 0; 	padding: 0; 	width: 1px; 	pinnacle: 1px; 	overflow: subconscious; 	word-wrap: normal !important; 	clip: rect(1px, 1px, 1px, 1px);  	&:focus { 		display: cake; 		elevation: 5px; 		left: 5px; 		z-index: 100000; // Above WP toolbar 		clip-path: none; 		groundwork-color: #eee; 		padding: 15px 23px 14px; 		width: motorcar; 		top: auto; 		text-decoration: none; 		line-pinnacle: normal; 		color: #444; 		font-size: 1em; 		clip: auto !important; 	} }

Now on to the JavaScript! We're 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 push.

// Gear up a variable for our push element. const scrollToTopButton = certificate.getElementById('js-superlative');

Next, we'll create a function that shows the coil-to-top button if the user scrolls across 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 together a class to the whorl-to-superlative button to show information technology!   if (y > 0) {     scrollToTopButton.className = "top-link show";   } else {     scrollToTopButton.className = "elevation-link hide";   } };

We'll also add an issue listener, which will watch as the user scrolls (so we know where they're at on the page).

window.addEventListener("scroll", scrollFunc);

Almost done! Side by side, we demand to define the role that makes the push button actually take the user back to the top of the page. To practise that, nosotros'll create a variable for the number of pixels we are from the top of the page. If that number is greater than 0, the office will set it back to 0, taking united states to the top!

Nosotros'll also add a fiddling animation here, and then the leap isn't likewise sudden.

const scrollToTop = () => {   // Let's set a variable for the number of pixels nosotros are from the top of the certificate.   const c = document.documentElement.scrollTop || certificate.trunk.scrollTop;      // If that number is greater than 0, nosotros'll ringlet back to 0, or the peak of the certificate.   // We'll besides animate that whorl with requestAnimationFrame:   // https://developer.mozilla.org/en-Usa/docs/Web/API/window/requestAnimationFrame   if (c > 0) {     window.requestAnimationFrame(scrollToTop);     // ScrollTo takes an x and a y coordinate.     // Increase the 'x' value to go a smoother/slower ringlet!     window.scrollTo(0, c - c / 10);   } };

Last but not least, nosotros but need to tell the folio to run that role when someone clicks our gummy back-to-top push button.

// When the button is clicked, run our ScrolltoTop function above! scrollToTopButton.onclick = function(east) {   e.preventDefault();   scrollToTop(); }

That'southward it! You'll now have a fully functioning and customizable sticky back-to-pinnacle button on your WordPress site. To meet the unabridged tutorial in action, recall to check out this Codepen from Flywheel's very own front-end engineer, Josh Masen!