Smooth Scroll To Top Button for WordPress with Code Snippets

So today we are going to add a nice smooth scroll to top WordPress button in the bottom right that allows visitors to click to scroll all the way back to the top. These buttons are interesting as many will say they aren’t used much but from a usability standpoint it can’t hurt.

What is a sticky back-to-top button?

Also known as a scroll-to-top button or go-to-top image, the sticky back-to-top button is a helpful navigation element that helps users get back to the top of the web page they’re viewing. A common UI pattern is to place this button in the lower right-hand corner of the screen, making it “sticky” via a fixed position so it’s always accessible as the user scrolls down the page.

How Are We Going To Build The Functionality?

We built this by adding on 2 plugins which are very helpful at allowing code additions without having to edit the core theme to add code. Please download and install [ Code Snippets ] and [ HFCM ]. After this we add on some Custom CSS to clean up the display and format of the button.

Custom CSS

Please add the following to your Custom CSS In your theme. This builds the button display and colors along with position, if you choose or need to customize the round button this is where you can tweak away.

.top-link {
  transition: all 0.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: 0.25em;
  width: 40px;
  height: 40px;
  background-color: #F8F8F8;
}

.show {
  visibility: visible;
  opacity: 1;
}

.hide {
  visibility: hidden;
  opacity: 0;
}

svg {
  fill: #000;
  width: 24px;
  height: 12px;
}

svg:hover {
  background-color: #E8E8E8;
}
svg:hover svg {
  fill: #000000;
}

.screen-reader-text {
  position: absolute;
  clip-path: inset(50%);
  margin: -1px;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  word-wrap: normal !important;
  clip: rect(1px, 1px, 1px, 1px);
}
.screen-reader-text screen-reader-text:focus {
  display: block;
  top: 5px;
  left: 5px;
  z-index: 100000;
  clip-path: none;
  background-color: #eee;
  padding: 15px 23px 14px;
  width: auto;
  height: auto;
  text-decoration: none;
  line-height: normal;
  color: #444;
  font-size: 1em;
  clip: auto !important;
}

Configure the Javascript

1. Click On [ Code Snippets ] and Click [ Add New ]
2. Set [ Title ] As [ Scroll To Top ]
3. Paste In The Below Code
4. Set To [ Only run on site front-end ]
5. Click [ Save Changes & Activate ]

add_action( 'wp_head', function () { ?>
	<script>

		// Set a variable for our button element.
		const scrollToTopButton = document.getElementById('js-top');
		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";
  		}
	};

window.addEventListener("scroll", scrollFunc);
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:
  // https://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 / 15);
  }
};
// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}
	</script>
<?php } );

Configure the Button Front End

1. Click On [ HFCM ] and Click [ Add New ]
2. Set [ Snippet Name ] As [ Go to Top Button ]
3. Set [ Display] As [ Site Wide ]
4. Set [ Location ] As [ Header ]
5. Paste In The Below Code
6. Click [ Save ]

<a class="top-link hide" href="" id="js-top">
  <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Back to top</span>
</a>

I went with the SVG as it is a single line and super lightweight to the code and performance of the website.

• SVGs don’t get pixelated no matter the screen size
• SVGs are universally supported across browsers
• Simple and easy to style through CSS

Bottom Line

So I hope this is found as helpful and useful for people, I haven’t placed on on my site in quite a while but since it was requested so may as well build a good one on a solid base for page speed to be minimally or not at all impacted!

I love technology, I have plenty of technical side experience but never really thought of blogging as a way to earn an income. With everything that has gone on in the last couple years and the instability of the job markets I started to learn how to blog and build affiliate niche sites to add more income channels to give me the chance to break free from the financial chains that bind me and find real freedom!