WordPress gives us unlimited abilities to customize our blogs according to our needs and preferences and one of the things that make this possible is the miraculous jQuery. And today we are gonna give a quick tutorial on how to add a jQuery powered Goto TOP button on your WordPress blog.
jQuery powered scroll to Top button
Automated scroll button
If you don’t want to get into much of a hassle you can download the Scroll to Top Plugin by dynamicwp team.
Add Top Scroll button Manually
To simplify this job we would be using jQuery Scroll to Top Control by Dynamic Drive. As the name suggests, it allows you to display the button as the user scrolls down at the bottom right corner of your blog.
Integrate jQuery in WordPress
Here is what you need to do in order to integrate jQuery into your wordpress blog.
- Download this javascript file : scrolltopcontrol.js
- Upload the file to your theme’s folder
- Download this icon : Top icon
eg.“http://www.yoursite.com/wp-content/themes/them-name/scrolltotop.js“
- Upload the icon to your images folder
eg: “http://www.yoursite.com/wp-content/themes/them-name/images/gototop.png”
Caution : Before uploading your javascript file scrolltotop.js open it in a text editor like notepad and change the url of the image.
Scripting time
Now add the following code snippet into your header.php file. You can access it from your dashboard, Appearance>>Editor>>header.php
Caution : Before adding the code just make sure that the url of the javascript file is correct in the first line of the code
Well that was much of it, now if you would like to customize the button to suit your style then here is a piece of code that you can add/edit in your .js file:
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML:, //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
I hope you liked the tutorial, do share your comments and feedback with us.
If you find this post useful just consider sharing it with other via Facebook, twitter or Digg. To get such updates regularly please subscribe to our feed via Email .
<Credit>
Subscribe Updates, Its FREE!
![How to LazyLoad images to Improve Page Speed [WordPress]](http://www.shoutmeloud.com/wp-content/uploads/2011/09/LazyLoader-Settings-550x345.png?699e3a)
Article by Karan Labra
Karan has written 7 articles.
If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.
→ 
→ 
{ 8 comments… read them below or add one }
Nice article. Better fx than the default “Go to Top” button.
BTW, what is your thought on minifying javascript code?
I did gave it a try and it significantly decreased my loading time.
But it appeared that compressing javascript created havoc on my blog.
And it hardly matters as long as you are providing quality content to your readers, as that is what matters the most.
I like jQuery for powerful features. I will try it sure in my Blog. Thanks to author for this advanded and useful post.
Thank you very much for this nice tutorial.
Will try to put it on my blog.
Try it and do share if you face any problems.
Newbie and fresh bloggers like me would like to choose the plugin
Very good tutorial , customizing blogs is a very important point and i enjoyed learning and reading about jquery , thank You
Thank you for your feedback Rahul.