Smooth Scrolling Back To Top Widget For Blogger

I am sure you have already seen a "Scroll to Top" or often called as "Back to Top" button. Scroll to top button is one of the common things that can found in every blogs.

Introduction

Adding a scroll to top button to your website can be a great way to allow your users to navigate, especially if you have long-scrolling pages. Yes, because some users are lazy to scroll up, and instead of scrolling up they may just close the browser tab - that we obviously don't want to happen. A scroll button should be subtle and it has become expected to see one on the lower right of the page. Some blogs include the button in the footer while others use fixed positioning to place the button and show/hide the button based on where the user is on the page. This tutorial will cover how to add a smooth scrolling back to top for blogger.

Features

Lightweight CSS
Minified Script
Improved HTML
SEO friendly
Fully Customizable
Responsive

External Scripts

Jquery Library v1.3.0 or higher (?)

Live Demo

Demo not available.

HTML

Go to Blogger » Template » Backup your Template » and Edit HTML
Find (ctrl+f) </body> and just above it add the following code

<a href='#' id='Mba-scrollToTop' style='display:none;'>
<svg height='22px' version='1.1' viewBox='0 0 22 22' width='22px' xmlns='http://www.w3.org/2000/svg'><polygon points='16.615,10.647 10.98,4.379  5.345,10.647 9.596,10.647 9.596,19.491 12.364,19.491 12.364,10.647 ' style='fill:#ADADAD;'/><polygon points='2.748,5.503 2.748,2.748 19.233,2.748  19.233,5.51 21.981,5.51 21.981,0 0,0 0,5.501 ' style='fill:#ADADAD;'/></svg></a>

CSS

Find (ctrl+f) ]]></b:skin> then add the following code just above it

#Mba-scrollToTop {position:fixed;bottom:20px;right:20px;cursor:pointer;z-index:99999;}

JScript

Find (ctrl+f) </body> and just above it add the following code

<script type='text/javascript'>
jQuery(document).ready(function(){var t=220,e=500
jQuery(window).scroll(function(){jQuery(this).scrollTop()>t?jQuery("#Mba-scrollToTop").fadeIn(e):jQuery("#Mba-scrollToTop").fadeOut(e)}),jQuery("#Mba-scrollToTop").click(function(t){return t.preventDefault(),jQuery("html, body").animate({scrollTop:0},e),!1})})
</script>

Save your Template

Final Words

Share your thoughts about this widget by leaving a comment below!

Rate This Article

Thanks for reading: Smooth Scrolling Back To Top Widget For Blogger, Stay tune to get latest Blogging Tips.

TheBloggerJet