How to Design Sticky Back-To-Top Button in WordPress without Plugin

Back to top button

This article contains an easy method of adding back-to-top button in WordPress, including easy guidelines in case if you wish to customize it further.

Back-to-top button eases the stress of scrolling; most especially for pages with much content.



Numerous number of free themes don’t come with back-to-top button in as much as some poor designed premium themes.

Websites with this back-to-top button encourages users to have a deep insight when using their site – as users can navigate from the header to the footer within a few moment.

Although there are some plugins that you can use to add this back-to-top button in your WordPress website.

But I don’t recommend anyone following my tutorials in this website to have too much plugin – as this may affect your site performance.

Here are some reasons why you should not use too much plugin in your WordPress website

Today am going to show you guys some codes that will give you an awesome sticky back-to-top button in your WordPress website.

Back-to-top button requirements

Before you can successfully add this back-to-top button manually in your website, there are some basic things you need to know within your WordPress dashboard.

Below are some of the functions you need to know:

Theme Editor – This contains other useful theme editing links which helps in modifying your theme default layout. You can see it under dashboard > Appearance > Theme Editor.

Stylesheet (style.css) – This element comprises the main CSS codes that your theme uses to render amazing designs to your website front-end.

Also read:   List of the Best Free WordPress Social Auto Post Plugins

JavaScript Theme File (js) – This element contains the major JavaScript files that controls your theme actions. The image below shows where to locate this element within your Theme Editor.

Theme files - Back-To-Top Button

Theme Footer (footer.php) – This element contains all the footer codes of your website. Mind you that any code that is located within the theme footer runs every time your website loads.

Since I have shown you the elements from the Theme Editor needed to design this sticky button, let’s dive to the coding part.

Designing a Sticky Back-to-top Button using codes

We are going to combine some lines of code from different web development languages in order to have a functional and fanciful back-to-top button.

It is recommended to use a child theme when making changes to your parent theme so that you won’t lose anything upon theme update.

In case if you don’t wish to upgrade your theme when newer version is available, you can make changes directly to your parent theme.

I’m going to divide this tutorial into subdivisions and I’ll use screenshots for you to understand it properly.

Make sure to follow below steps simultaneously as I’m going to share with you – an awesome button design.

Let’s go now…

Step #1: Back-to-top jQuery function

Copy below code and paste it at the JavaScript (js) element of your Theme Files. I’ll advise you to paste below code at the last line of code in your script.js.

/* Back to top code */
jQuery(function ($) {
  var $window = $(window);
  var $buttonTop = $('.my-button-top');
  var scrollTimer;

  $buttonTop.on('click', function () {
    $('html, body').animate({
      scrollTop: 0,
    }, 900);
  });

  $window.on('scroll', function () {
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(function() {
     if ($window.scrollTop() > 300) {
        $buttonTop.addClass('my-button-top-visible');
      } else {
        $buttonTop.removeClass('my-button-top-visible');
      }         
    }, 250);
  });  
})

The code above contains some CSS classes which I’ll show you the code that consists the classes in the fourth coming steps.

Also read:   How to Speed Up WordPress Loading Time [Ultimate Guide]

Screenshot below shows how and where you should paste the code above.

Note: In case if your theme does not contain any element that is named script.js, look for any other element that ends with .js and paste above code inside it.

Make sure to leave at least two empty lines of code after the last JavaScript code so that you won’t alter the previous codes.

From below image, I leave line 64 & 65 before I pasted the back-to-top code.

script.js

You can make some customization in the above code if you wish to.

In this line of code “if ($window.scrollTop() > 300” the 300 means that once you scroll 300 pixel from the top of your website, this back-to-top button will appear.

The 250 that you can find towards the end of the code means that it will take only 250 milliseconds once you click on the back-to-top button to reach the top of your website.

Now click Update File to save your changes.

Step #2: Style your back-to-top button

I’ve designed a simple and fanciful back-to-top button. So all you have to do is to copy below code and paste it in your style.css. You can locate this in Dashboard > Appearance > Theme Editor > Stylesheet.

Make sure to place below code at the last line of code in your style.css to prevent altering already existing codes.

/* Back-to-top CSS code */
.my-button-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1;
  width: 40px;
  height: 40px;
  border: 0;
  padding: 0px 10px 4px;
  border-radius: 3px;
  box-shadow: none;
  background: #000000;
  color: #fff;
  font-size: 26px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
}
.my-button-top:hover{
    background: #018a23;
}
.my-button-top-visible {
  opacity: 0.7;
  pointer-events: auto;
}

From the above codes you can change the code “background: #000000;” to your websites color code. Just change the #000000 to your desired color code.

Also read:   How to Upload Apk and Other Files in WordPress [100% working] ?

Make sure to click on “Update File” after you’ve pasted this codes.

Step #3: Place your back-to-top button

To place your back-to-top button, locate your theme footer. You can locate this under Appearance > Theme Editor > Theme Footer.

Copy below code and paste it just before “<?php wp_footer(); ?>

<button class="my-button-top">↑</button>

See below image for accurate placement

footer

Hit “Update File” to save changes. Now visit your website to see how this back-to-top button works.

Preview of this simple back-to-top button

This is how the back-to-top button should be displayed in your website both on desktop and mobile devices.

As I said earlier, you can change the black background color to your favorite website color if you don’t like the default black color.

preview - Back-To-Top Button

Pros of back-to-top button

This amazing back-to-top button has the following advantages:

  1. No external CSS file was used in the design
  2. The design is responsive across devices
  3. Very easy to customize (if you wish to)
  4. Hides by default and appears when there is need for it
  5. It does not affect your page loading speed

Conclusion

With the documentation in this guide, you can design an amazing back-to-top button which can help your visitors to scroll to the top of your website with just one click.

Use the comment section to tell us your review concerning this article.

Tell your friends about this article by sharing it. Thanks!

Share this article:
Sign up for my newsletter ⤵

get all the fresh content directly to your email.

After you have subscribed, check your email inbox to confirm your subscription.




Man Behind JonakyBlog

Author | Admin

Nnabugwu Ikechukwu Johnbosco is a part time blogger that love to blog on categories like; Blogging, WordPress development, Technology, Web Design, Make money online, etc. A web developer (plays with WordPress sites & Blogger); who designed JonakyBlog. (Contact Us)

View all posts by Admin →

Leave a Reply
Your Comments are too Valuable! But please see that they are related to the above article, and are not off-topic!

Your email address will not be published.