How Create a Smooth Scroll to Top Effect in WordPress Themes

[easy-social-share counters=0 style="button"]

This article is created for a do it yourself intermediate user who is actually more comfortable editing their themes or templates.

 If you would like to using a plugin technique, and then if you please using smooth web page scroll to top plugin. For people who would like to understand how to do that without a plugin, and then please continue on reading.

Exactly what is Smooth Scroll and When to use it?

When ever a web page and post has lots of articles users are forced to scroll right down to read those contents. As users scroll down, almost all your own navigational links go up.

When users are completed reading that content they are required to scroll up to notice exactly what else to do on your web site. Scroll to top key instantly sends users to the top of the web page.

You can still insert this as a text link without the use of jQuery, like that:

<a href="#" rel="nofollow" title="Back to top">^Top</a>

It just simply sends users to the top of the web page and also scrolls up the entire web page in milliseconds. It is functional, but yet more than a little just like a bump while on the road.

Smooth scroll is opposite of this. It smoothly slides user back to the top of web page. This creates a great effect and also improves the user experience.

Inserting Smooth Scroll to Top Effect with jQuery in WordPress

To insert a smooth scroll to top effect, we can easily make use of jQuery, a few CSS or a single collection of HTML code in your own WordPress themes. 1st open up a text editor just like Notepad.

Set up a data file and also save it as smoothscroll.js. Copy and paste this code in the data file:

jQuery(document).ready(function($){

 $(window).scroll(function(){

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

 $('#smoothup') .fadeOut();

 } else {

 $('#smoothup') .fadeIn();

 }

 });

 $('#smoothup').on('click', function(){

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

 return false;

 });

});

Save the data file and also upload it to your own WordPress themes directory’s /js/ file folder. In case your own themes does not require a /js/ website directory, and then set up one and also upload smoothscroll.js to it.

This code is the jQuery script that will actually insert smooth scroll effect to a key that will take users to the top of the web page.The next thing you need to do is to insert the smoothscroll.js to your own themes.

To do this perfectly, we can easily enqueue the script in WordPress. Copy and paste this code to your own theme’s functions .php file folder.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '', true );

In the above code, now we have informed WordPress to load our script and also load jQuery library since our plugin depends upon it.

Now this time now we have inserted the jQuery section, lets insert an actual url to our WordPress web site that will take users back to the top. Paste this HTML almost any exactly where in your own theme’s footer.php data file.

<a href="#top" rel="nofollow" id="smoothup" title="Back to top"></a>

When you noted that now we have inserted a link but may not have linked it to any kind of text. That’s mainly because we can easily make use of a picture icon with in the upward direction arrow to show a back into top key.

From this example we will be making use of a 64x64px icon. Insert this to your own theme’s stylesheet.

#smoothup {

height: 64px;

width: 64px;

position:fixed;

bottom:50px;

right:100px;

text-indent:-9999px;

display:none;

background: url("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 the CSS above, now we have made use of fixed position for our picture icon and also used a picture icon as the background picture.

You can still upload your own picture icon making use of WordPress media uploader then simply get the picture web url to paste it as background web url.

Now we have also inserted a little bit of CSS animation to the key which rotates the key when ever a user will take their mouse over it.

Hope you all like this Tuts byCodiTuts.com, if yes then keep us supporting by sharing this post, Cheerful Coding smiley.

Submit a comment

Pin It on Pinterest