Back to top

Affiliate Link: Interested In a Useful Tables For Amazon Products and More? Check Out:

Amalinks Pro

Add A Smooth Scroll To Top Button To Acabado

Featured Tiles
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

So today we are going to add a nice smooth scrolling button which 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 Acabado [ How-To Custom CSS ] 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="http://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!

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals! Read More About Me...

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals! Read More About Me...

One thought on “Add A Smooth Scroll To Top Button To Acabado

  1. Josh,
    Newbie to Acabado and P24.
    I have several posts up, but something has happened in the last few days that is bugging me.
    When I go to write a “new post”, the Post/PageMeta and the Post/Page Settings bars are right in the middle of the text area instead of at the bottom of the post.
    I can’t seem to “drag” them down out of the way.
    This makes it hard to see the post I’m trying to write and edit.
    What went wrong?
    A few days ago, I added the Google credentials into the “header php” and noticed it after that.
    I deleted the credentials to see if it would clear up, but the bars are still in the middle of the post.
    I am completely IT illiterate.
    Help, please,
    alan

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Content