What is Procedure to Add a Smooth Scroll in WordPress by using jQuery?

When you visit any website you see different options for the benefit of users, by which they can see all the content of their website.As you know some websites are small while as some are very big.some people are not able to see all the content, so to sortout this issue we do a different things.In them,we can use smooth scroll in wordpress by using jQuery.

So, in this post, we will tell  you about how to add a smooth scroll in wordpress by using jQuery.

Our WordPress support team is always with you. So, feel free to contact on +1 888 614 0555

Now the question is What is Smooth Scroll and When to use it?

If in your page there is a lot of content then users are forced to scroll down to read content. When they move down, it navigation links go up.

And users are able to reading the post,  they require to scroll up to know what next is  on the website.

Sutch to top button sends users at the top side of the page. You can also add it as a text link without using jQuery. You can add like this

<a href=”#” title=”Back to top”>^Top</a>

This tag is used just to scroll the page up or down just in milliseconds. It is a good functional but the smooth scroll is very some different from this. By the help of smooth scroll the web page scrolls up very smoothly so user can read all the page quitely. This makes your page very effective quality and improves the user experience on your website.

So user feels comfortable on your web page,and he comes again and again to your website.

Now we will learn how to add a smooth scroll in wordpress by using jQuery

If you have a need to add smooth scroll,first of all you have to use jQuery, little bit CSS and a single line of HTML code in your WordPress theme. For this, open your text editor. Now, create a file as smooth-scroll.js and save this file in your system.

Now,you have to make a copy and paste the below given code:-



if ($(this).scrollTop() < 200){

$(‘#smoothup’) .fadeOut();

} else {

$(‘#smoothup’) .fadeIn();



$(‘#smoothup’).on(‘click’, function(){

$(‘html, body’).animate({scrollTop:0}, ‘fast’);

return false;


Now you have a need to save this file and upload to your WordPress theme directory/js/folder.

If you have not a / js/directory  in your theme,then you can create this. This code is very beneficial for all users,it is in the jQuery script. IT takes users back to the top of the page, and it will add a smooth scroll effect to a button down.

Now, you have a need  to add smoothscroll.js to your theme. To do it, we will write the script in the WordPress. Now you have to copy and paste the below code in the theme’s file:-


wp_enqueue_script( ‘smoothup’, get_template_directory_uri() .

‘/js/smoothscroll.js’, array( ‘jquery’ ), ”, true );


Our plugin depends on WordPress, It load our script and load jQuery library When we have added jQuery part and add an actual link to WordPress website which takes the users to top end.now paste this HTML code anywhere in the footer.php file in your theme.


<a href=”#top” id=”smoothup” title=”Back to top”></a>


As you see that we have added a link but have not linked it to any text. That’s because we will use an image icon with upward arrow to display a back to top button. we are using a 40x40px icon in this example.You have to add this to your theme’s stylesheet.


#smoothup {

height: 40px;

width: 40px;






background: url(“http://www.example.com/wp-content/uploads/2013/07/top_icon.png”);

-webkit-transition-duration: 0.4s;

-moz-transition-duration: 0.4s; transition-duration: 0.4s;

}#smoothup:hover {

-webkit-transform: rotate(360deg) }

background: url(”) no-repeat;



In above CSS code, we can use a fixed position for image icon and also we can use an image icon as the background image. You could upload your image by WordPress media uploader then copy the image URL to paste as the background URL.

We have added a button of  small css animation, when a user click on it rotates the button.

The user can search many things in it and its scrolling effect pushes a user to upwards.you can also add the floating footer bar to show featured content on your website.

We hope that this article will help you in future by the help of this article you can add a smooth scroll to the top of page effect on your site using jQuery.


Leave a Reply

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