site stats
How to add Scroll to Top button for Wordpress website?

How to add Scroll to Top button to WordPress site without any Plugin?

How to add Scroll to Top button to WordPress site without any Plugin?
How to add Scroll to Top button to WordPress site without any Plugin?

This is the Helphin guide will show you how to add scroll to top button without any WordPress Plugins. It’s very simple and easy guide for beginners.

The website is one of the essential, undeniable things in our daily life. Some peoples are using the website for their income and some peoples using for knowledge. websites owner earns money through advertisement. If you want to earn money, then you need to get more customers.

Article and review websites have more visitors traffic other than normal sites. That kind of websites have the good earnings. If you want more customers, you will work with more efforts.

But the web page has too long and too length. So it will be difficult to the visitors to scroll the webpage. That will give negative effect to the website. This is the reason that reduces the visitor’s count. So here we’re going to use the simple shortcuts to avoid this issue.

So., let’s begin…

Step 1: Copy & Paste the below code into your text editor. Save it as topbutton.js on desktop location. Download the UP arrow image and also save it to desktop location. For UP arrow image, PNG format is better.

jQuery(document).ready(function($){
var offset = 100;
var speed = 250;
var duration = 500;
$(window).scroll(function(){
if ($(this).scrollTop() < offset) {
$('.topbutton') .fadeOut(duration);
} else {
$('.topbutton') .fadeIn(duration);
}
});
$('.topbutton').on('click', function(){
$('html, body').animate({scrollTop:0}, speed);
return false;
});
});

 How to add Scroll to top button without WordPress Plugin?

Step 2: Now log in your WordPress admin panel. Navigate the Editor option under the Appearance menu on the left side bar.
 How to add Scroll to top button without WordPress Plugin?

Step 3: In the editor view, Click to open functions.php file on right side list. Add these following line to the file. Make sure this code must add between the php tag. Don’t forget to hit Update file button in bottom of the page.

function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/topbutton.js',
array( 'jquery' )
);
}

add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );

 How to add Scroll to top button without WordPress Plugin?

Step 4: Now open footer.php file and add line between the HTML tag. Hit Update File button to save the changes.

<a href="#" class="topbutton"></a>

 How to add Scroll to top button without WordPress Plugin?

Step 5: Open your style.css file. Add some properties of the topbutton. In this style sheet, you can able to set height, width, left, right position and the image location of the button. Finally click Update File button to save it.

.topbutton {
height:83px;
width:122px;
position: fixed;
left: 10px;
top: 20px;
z-index:1;
background-image: url("./top.png");
background-repeat:repeat;
display:none;
}

 How to add Scroll to top button without WordPress Plugin?

Step 6: Now log in your godaddy ftp account in to your filezilla software. Enter your current theme folder under the wp-content/themes/<current theme folder> directory. Now upload your topbutton.js file and Top.png image file into your theme folder.
 How to add Scroll to top button without WordPress Plugin?

Step 7: Now refresh your website and scroll down the page. The Top arrow button is visible to everyone. When you click this Up arrow button, it will navigate the top page of the website.
 How to add Scroll to top button without WordPress Plugin?

Author of the JavaScript code Jenni McKinnon

We hope this helphin guide will help you to fix the Scroll to Top button on your WordPress site.

This Post Has One Comment

  1. I am truly grateful to the owner of this site who has shared this great post at at this place.

Leave a Reply

Close Menu