We all don’t want to lose visitors. When after scrolling long deep pages, if a readers has to go back to top of page, he/she has to do this by pressing the up button located on the right side of our browser, which is very annoying.
Isn’t it?
But don’t worry you can now make your visitors stay on your blog by using our tutorial How To Add Floating Go To Top Button In WordPress Blogs.
This will Add Floating Go To Top Button In WordPress Blogs which will help you go back to top of page with just one click, no matter what is the position of the page, even if you are half way down the post, you can click this button to go back to top.
3 Ways To Add Floating Go To Top Button In WordPress Blogs
1. Add Simple Code To Your Blog (Best Way)
2. Use Scroll To Top WordPress Plugin
3. Use Go To Top WordPress Plugin
1. Add Simple Code To Your Blog.
This is simple way to add go to top button, best way to add code to your blog. This will also add a cool image but you can change it to your own image.
- Goto WordPress Dashboard > Appearance >Widget
- Drop a Text Widget to your sidebar.
- Now Paste below code in Text Widget
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#"><img src="http://lh6.ggpht.com/_7wsQzULWIwo/SgXYIY37QsI/AAAAAAAABDY/IyDZK-CJzdA/Up1Blue%5B4%5D.png"/></a>
- Click on Save Button and See the magic!
Note: You can also add image you want to do so just replace http://lh6.ggpht.com/_7wsQzULWIwo/SgXYIY37QsI/AAAAAAAABDY/IyDZK-CJzdA/Up1Blue%5B4%5D.png with your image url.
2. Use Scroll To Top WordPress Plugin.
Fully written in jQuery, the plugin adds a floating box centered in the footer of your site that only appears when you scroll the page down, and when clicked gently roll the site to the top. All this without any modification to your template.
How To use it?
- Download Plugin Here
- You can either use the automatic plugin installer or your FTP program to upload it to your wp-content/plugins directory the top-level folder. Don’t just upload all the php files and put them in /wp-content/plugins/.
- Activate the plugin through the ‘Plugins’ menu in WordPress
- Visit your Scroll to Top Options (Options – Scroll to Top)
- Configure any options as desired, and then enable the plugin
- That’s it!
3. Use Go To Top WordPress Plugin.
This plugin will Add a “Go to top” link to your posts. This is a wordpress plugin which based on jQuery, jQuery Easing and Scroll to Top v3
How To use it?
- Download Plugin Here
- Upload the plugin folder to the
/wp-content/plugins/directory or use Dashboard Method - Activate the plugin through the ‘Plugins’ menu in WordPress
That’s All. Hope you will like this post. If you face any problem just comment below, I’d be glad to help you out.
Hey!
Thanks so much for this post! I’ve implemented the html code and I hope you can help me with a specific request…
I’d like the floating image to show further down on the page, not immediately when people land on it.
I have a sign up form on the top of the page and a long descriptive text underneath. I want people to see the floating ‘Sign up’ image (with a ‘back to top’ link in it) when they start reading the text to have the possibility to go straight back to the top to the sign up form.
I hope I explained myself right… and it would be awesome if you could suggest how to do this
Many thanks
Sylvia
Hello Sylvia,
Sure, I’ll try my best to help. Can you please email me with description of issue along with screenshot (if possible)
I’d be more than happy to help. My email is info@ allbloggingtips.com
I’m looking for different ways to add a scroll to top button for my site because my theme doesn’t have a built in button for this functionality. Luckily, I’ve stumbled upon this. Thanks for the quick tutorial. I might go with no. 1, though the image will be on a fixed position. Thank you so much Ammar!
Good to see that the post was useful for you, Omar.
Keep visiting.
Go to Top Button definitely adds a greater functionality and user experience. So it’s one another quality factor. And most importantly it’s described in a suitable manner by Ammar.
Wow that’s a cool tip. I added it in my blog.
Thank you for this but my theme itself got that button. But few have asked me how to install into theme, now I’ll show this to people. :D
Would love to have a similar button for blogger. Any place i can get hold of it?
Yes you can also add floating goto top button in Blogger. Just copy this code
https://allbloggingtips.com/wp-content/uploads/2012/04/goto-top-button-code-for-blogger.txt
and place it in text widget in sidebar :D
Good Work. Hope i can get more tips from this site. Thanks.