How to Add Scroll To Top Button in WordPress

 

 

 

 

 

 

 

The good user-friendly experience and simplicity is a must to keep visitors on every website to increase traffic in a good website. The best way to do this is by building a simple and elegant page on your site. The reader may leave your website instantly and may not revisit again your site if your site is  inconvenient or difficult to use. This would surely reduce the page traffic on your site.  One of the most common user-friendly technique is to Add Scroll To Top Button on WordPress site.

To be honest, I hate it when I have to Refresh the Page or Scroll to Top every time until my Index Finger is tired of running back and forth. Even the popular websites like Matt and Google+ which have Infinite Scrolling Page is very annoying to use because they lack User Interface. Also, the Posts with uncountable words is better with Scroll to Top Button. In this article, I’m going to write plain  Steps to Add Scroll To Top Button in WordPress Site without using Plugin.

---

Add Scroll To Top Button in WordPress

---

STEP 1:  ADDING Button To the head section

---

This is a very first step. Before moving ahead, our task is to create an anchor tag button in the </head> section with TopButton class inside </head>. Don’t panic !! It’s not as tricky as it sounds. We can do this by using wp_head action hook. Simply copy the following code in your functions.php file.

// Scroll to Top Button
add_action('wp_head','pp_scroll_to_top_button');
 function pp_scroll_to_top_button(){
?>
<a href="#" class="TopButton"></a>
<?php
}

---

STEP 2:  Enqueuing Styles and Scripts

---

This is the second step. Make sure you have enqueued your Custom Styles and Scripts in your functions.php file in your Child Theme.

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 function theme_enqueue_styles() {
  wp_enqueue_style( 'custom', get_stylesheet_directory_uri() . '/css/custom.css' );
  wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js' );
}

---

STEP 3:  Styling the Scroll To Top Button

---

We do need to Display the Button somewhere within the pages or posts.  Otherwise, the Scroll to Top Button disappears or will be misplaced within the site. Copy the following code in your custom.css file in order to display at the bottom right corner of your page. This is for better User Experience.

/* Scroll to Top Button */
.TopButton{
width:100px;
text-align:center;
background: whiteSmoke;
font-weight: bold;
color: #444;
right:40px;
height:125px;
padding:10px;
display:none;
text-decoration: none;
position:fixed;
z-index: 999;
bottom: 0;
background: url('scroll_up.png') no-repeat 0px 20px;
}

Download scroll_up.png from here DOWNLOAD PNG

Note: Upload the image file inside CSS directory for now

---

STEP 4:  Button hide and Display using Jquery

---

We now have everything we need. We just need a simple  jQuery functionality to Display the Button when we scroll from the Top of the Window Page. The trick is when we are at the Top of the Page, the button should Disappear.

Copy the below code in your custom.js file.

// Scroll to Top Button
jQuery(document).ready(function(){
  jQuery(window).scroll(function(){
      if (jQuery(this).scrollTop() > 100) {
          jQuery('.TopButton').fadeIn();
      } else {
          jQuery('.TopButton').fadeOut();
      }
  });
  jQuery('.TopButton').click(function(){
     jQuery('html, body').animate({scrollTop : 0},800);
     return false;
  });
});

Now we’ve finally added Scroll to Top Button on our site.

DEMO?

You’ll see the Scroll to Top Button on this very page bouncing at the bottom right. If you still haven’t seen the button, make sure you haven’t left your glasses somewhere, otherwise, get your eyes checked to Optometrist YO !! 😛