Scroll to Top jQuery button for Blogger

Scroll to Top jQuery button for Blogger

Here is a Demo of this Stylish Scroll up button. 

Every blogger is looking for a Stylish Scroll up or Scroll to top .
so here is Stylish Scroll up for blogger and this widgets is coded in pure css code.
this widget is not using any image . but this button is made in css code.
the Stylish Scrolling effect is added in this widget due to jQuery is added. this button is actived when you are in bottom of website or blog .
this button will appear on the bottom of right side .

follow the following step  to add this button on your blogger or website.



Step 1:- first back-up your Blogger template.

Step 1:- Click on the Edit HTML .

step 2:- search for </body> Tag in Your Template .

Step 3:- Copy this below code .

Step 4 :- paste this code just above the </body> Tag

step 5:- save the Template.

Note :- if you want to add IMAGE instead of the Button then just replace the CSS Button with the your desired image.
then, just change the CSS background with your URL of desired image  that's using the tag background:url()

<style type="text/css"> #abt-Top {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;} </style> <style type="text/css"> #abt-Top {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;} </style> <!-- Scroll to Top Plugin for Blogger by www.iblogtrick.blogspot.in--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"/> <script type='text/javascript'> jQuery(function($) { $.fn.scrollToTop = function() { $(this).hide().removeAttr("href"); if ($(window).scrollTop() != "0") { $(this).fadeIn("slow") } var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() == "0") { $(scrollDiv).fadeOut("slow") } else { $(scrollDiv).fadeIn("slow") } }); $(this).click(function() { $("html, body").animate({ scrollTop: 0 }, "slow") }) } }); jQuery(function($) { $("#abt-Top").scrollToTop(); }); </script> <!-- Scroll to Top Plugin for Blogger by www.iblogtrick.blogspot.in/--> <a href="#" id="abt-Top" style="display: none;">Scroll to Top </a>