When the readers of a blog read the lengthy blog posts, they end up scrolling back to the top of the pages. You can reduce the efforts of your blog readers by giving them a jQuery based Scroll to top button that will smoothly take them back to the top of the page. In this way they don’t need to scroll to go back to top, just a single click and they will be back on the top of the page.
In this tutorial, I’ll explain how to add a Dynamic jQuery Scroll to top button on your wordpress blog. I’ll make use of the jQuery Scroll to Top Control by Dynamic Drive. This button is called as Dynamic as it is not shown when you are above the fold it mean on the top of the page but when you slightly move down to the page, the button will appear at the bottom right corner of the page.
How to Add jQuery Go to Top button
- First of all download the following two files and upload them to your server :
- scrolltopcontrol.js – upload it to the theme folder of your blog ““
- Go to top icon – upload it to the images folder of your theme ““
NOTE : Before uploading the scrolltotop.js file to your server, open it with text editor and change the source of the image.
- Now sign in to your WordPress dashboard and go to Appearance -> Editor.
- Now select header.php file from the right hand side and paste the following code before </head>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scrolltopcontrol.js"> /*********************************************** * Scroll To Top Control script- ยฉ Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Project Page at http://www.dynamicdrive.com for full source code ***********************************************/ </script>
Make sure to change the source of javascript file to the one stated in Step 1.
- Save the file and that’s all about adding a jQuery Go to Top button to WordPress.
You can customize a variety of things, such as the amount of time it takes the script to scroll back up to the top, duration of the fade in/out effect for the control, and the number of pixels the user’s scrollbar should be from the top of the page before revealing the control. Inside the .js file, here is the relevant section to modify:
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
Alternative Method
If you don’t want to go into the coding part of your theme then you can use the WordPress Scroll to Top Plugin by dynamicwp team.
Great post simrandeep ๐ ,thanks
.-= Dev | Technshare´s last blog ..A Video Marketing Blueprint That Will Knock Your Socks Off =-.
Thanks for this, I’m going to be adding this little tool to my blog. I currently have the ‘ go to top’ link, but it does not scroll and the movement to the top is fast.
Its movement is smooth + it is not visible when a user is at the top of the page
Yes, I see it. I have just implimented it and it looks great. Thanks for this, I just need to work on the speed now, lol.
.-= George Serradinho´s last blog ..Cheap Advertising available on Serradinho Blog =-.
Hi again,
I changed the scrollduration to 2000 to give it a smoother scroll effect. Go have a look.
A quick question – why don’t you have this on your site? Just curious to know.
.-= George Serradinho´s last blog ..Cheap Advertising available on Serradinho Blog =-.
It’s looking nice on your blog. Now added to my site too ๐
Simply great! Going to implement in my blog. Yay! ๐
yeah, I was searching for this past one week. I just saw this one in Amit’s blog. Thanks for sharing ๐
.-= Srivathsan G.K´s last blog ..The Best VPN Software for Windows, Mac, Linux for Free รขโฌโ OpenVPN =-.
I too noticed it on Amit’s blog 2 or 3 days back. Most of the users are now using this button on their blogs now ๐
These back to top buttons attract bloggers,but can we make this button flashy as in bloggusion?
Yes we can make it flashy like bloggusion but we need to make a new image for this purpose.
I have added it on my site. Thanks for sharing,
Appreciate it a alot ๐
Gr8 piece of tutorial I found. Thanks so much
this is awesome
thank you for sharing such a nice tutorial
This button is working good! Thanks for sharing!