Animated Scroll To Top Widget for Blogger

Animated Scroll to Top widget for bloggerThe below post would let you to add a custom animated scroll to top rocket (or any icon) in your blog.
I am probably posting on the blog after 2 years or so. Sorry for the delay. I hope I would be able to re-run the blog more frequently once I get into a college.

The following scroll to top widget is sleak, clean elegant and super easy to add in your blog.  The best part is that you can add any other icon you want.


You can see the live demo on this page itself. To see it in action scroll down the page and hover/click over the rocket.

Adding the Widget

Many people would like to add and customize the code on their own. If so, you can copy the below code and paste it in the HTML/JavaScript widget.

/* Widget by AllBloggerTricks.com */


<div class="scroll-top">

<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgMzEuMDc2IDMxLjA3NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzEuMDc2IDMxLjA3NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yMS41NDksMjAuMjI3di0zLjk0N2MwLTguODA2LTMuNzI1LTE0LjEyNS01LjI4My0xNS45NjRDMTYuMDk4LDAuMTE2LDE1Ljg1MSwwLjAwMiwxNS41OTEsMCAgICBjLTAuMjYxLTAuMDAxLTAuNTA4LDAuMTEyLTAuNjc5LDAuMzFjLTEuNTg0LDEuODM1LTUuMzg0LDcuMTU2LTUuMzg0LDE1Ljk3djMuOTQ4bC0wLjcyOSwwLjQ5MSAgICBjLTEuNDA1LDAuOTQ4LTIuMjQ4LDIuNTMzLTIuMjQ4LDQuMjI5djQuNzExYzAsMC4yNzksMC4xNTQsMC41MzcsMC40LDAuNjdjMC4yNDcsMC4xMzIsMC41NDYsMC4xMTcsMC43NzgtMC4wMzlsMi4zNjgtMS41NzcgICAgYzAuNjY1LTAuNDQyLDEuNDQ1LTAuNjc5LDIuMjQ0LTAuNjc5aDEuNzQxdjIuMjgzYzAsMC40MiwwLjM0LDAuNzYsMC43NTksMC43NmgxLjM5NGMwLjQxOSwwLDAuNzU5LTAuMzQsMC43NTktMC43NnYtMi4yODNoMS43NCAgICBjMC43OTksMCwxLjU4LDAuMjM1LDIuMjQ2LDAuNjhsMi4zNjYsMS41NzZjMC4yMzIsMC4xNTYsMC41MzEsMC4xNzEsMC43NzgsMC4wMzljMC4yNDYtMC4xMzMsMC40LTAuMzkxLDAuNC0wLjY3di00LjcxMSAgICBjMC0xLjY5NC0wLjg0NC0zLjI3OS0yLjI0OC00LjIyOUwyMS41NDksMjAuMjI3eiBNMTUuNTM5LDE0LjA0M2MtMS40NDYsMC0yLjYyLTEuMTczLTIuNjItMi42MTljMC0xLjQ0NywxLjE3NC0yLjYxOSwyLjYyLTIuNjE5ICAgIGMxLjQ0NSwwLDIuNjE5LDEuMTcyLDIuNjE5LDIuNjE5QzE4LjE1OCwxMi44NywxNi45ODQsMTQuMDQzLDE1LjUzOSwxNC4wNDN6IiBmaWxsPSIjMzMzMzMzIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />

  <span class="flame"></span>
  <span class="flame"></span>
  <span class="flame"></span>
</div>


<style>
.scroll-top img{
height:45px;
margin: -12px 0 0 5px;
border:0;
}

.scroll-top {height: 60px; width: 60px; position: fixed; bottom: 100px; right: 30px; display: none; z-index: 9999;}.scroll-top:hover{animation-delay:0s;animation-duration:.1s;animation-iteration-count:infinite;animation-name:shake-little;animation-play-state:running;animation-timing-function:ease-in-out}.scroll-top .flame{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;border-color:#ffda44 transparent transparent;border-style:solid;border-width:25px 3px 3px;display:none;height:0;left:-4px;margin:-5px auto 0;position:absolute;right:0;top:66%;width:0}.scroll-top .flame+.flame{border-width:10px 2px 2px;left:20px;margin:0}.scroll-top .flame+.flame+.flame{border-width:10px 2px 2px;left:auto;margin:0;right:24px}.scrolling .flame{display:block}.nav-toggle,.owl-item .quote-icon,.price-box .price-box-head-shadow,.scroll-top .flame{transition:all .5s cubic-bezier(.25,.1,.25,1) 0s}@keyframes shake-little{0%{transform:translate(0,0) rotate(0)}14%,16%,2%,20%,24%,30%,48%,52%,54%,76%,8%,84%,86%,88%,92%,96%,98%{transform:translate(0,0) rotate(-.5deg)}10%,12%,22%,32%,4%,42%,44%,64%,72%,80%,90%{transform:translate(-1px,0) rotate(-.5deg)}18%,34%,36%,46%,6%,66%,68%,70%,74%,82%,94%{transform:translate(0,-1px) rotate(-.5deg)}26%,28%,38%,40%,50%,56%,58%,60%,62%,78%{transform:translate(-1px,-1px) rotate(-.5deg)}}
</style>


<script type="text/javascript">
// Scroll to top button
    wnHeight = jQuery(window).height();
    //Check to see if the window is top if not then display button
    jQuery(window).scroll(function(){
        if (jQuery(this).scrollTop() > wnHeight/2) {
            jQuery('.scroll-top').fadeIn();
        } else {
           jQuery('.scroll-top').fadeOut().removeClass('scrolling');
        }
    });

    //Click event to scroll to top
    jQuery('.scroll-top').click(function(){
        jQuery('html, body').animate({scrollTop : 0},800);
        jQuery(this).addClass('scrolling');

    });

</script><!-- Widget  by AllBloggerTricks.com -->

After adding, save the widget and template.
In case the widget is not working properly make sure you have JQuery library added in your blog.

You may also add any other icon you want instead of the Rocket. What you can do is go to http://www.flaticon.com/ (from where the rocket icon has been taken). You can click on the your desired icon, extract its Base 64 code and replace it with the code starting with img in the widget (which has been marked as red for your convinience)
Moreover you can adjust its positioning by playing with the margin CSS code. I will add detailed instructions once I am free.

You are done now ;)

46 comments:

  1. WoW Nice, Can I add this widget code in WordPress blog ?

    ReplyDelete
    Replies
    1. Actually you can! WordPress too allows you add such a widget.
      To do so, go to Appereances -> Widgets And add a Text widget and paste the given HTML code. Make sure you drag the widget to bottom most area a widget can be(optional).

      Delete
  2. Replies
    1. The code is not encrypted. I presume you are seeing the img source and saying so. The base 64 is another way of representing a small image. The benefit is that it does not require to contact the server for downloading the image. Its fast and can be resized to the desired dimensions.

      Delete
  3. I was looking for this from a long time I will use this on my movie blog http://guruofmovie.com

    ReplyDelete


  4. yours idea is really good and innovative , these resources are really awesome thanks for sharing those information and i got more in formation about this concept.


    sap training in chennai

    ReplyDelete

  5. First is to thank you for all this informative posts you give us for free; i bet all of us are happy.
    Such a great idea of yours! You have been a big help for me. Thanks a lot. more post for interesting topic. Great!

    SAP training in Chennai

    ReplyDelete
  6. doesn't work for me why ?? please help me

    ReplyDelete
  7. and how can i change the rockets color to #9900ff ???

    ReplyDelete
  8. This Tutorial is so helpful for all of us!
    Have a glimpse of my blog as well : Submit Your Blog Feed To Google News

    ReplyDelete
  9. Its not working. Can you fix it?

    ReplyDelete
  10. Funny scary horror prank video you can't stop your Laught after watch this video.

    https://youtu.be/V7Kwqb9fpQg

    ReplyDelete
  11. Very nice Blogger Temple. It is SEO friendly and Mobile friendly. Your website contains best Blogger templates, Blogger widgets and Blogger Guide

    ReplyDelete
  12. By the way, I found a good site, welcomed Runescape

    Gold
    the games with me.

    ReplyDelete
  13. This content creates a new hope and inspiration with in me. Thanks for sharing article like this. The way you have stated everything above is quite awesome. Keep blogging like this.


    Dot Net Training Institute in Chennai

    ReplyDelete
  14. Very nice and awesome article. Thanks http://www.techora.net/ . I,m also share many tutorials and improvement of your article on my own blog. Thanks again

    ReplyDelete
  15. this is very very helpful for me, i searching this for a long moment

    ReplyDelete
  16. nice widget thanks i really like it.

    http://www.tricksyear.com

    ReplyDelete
  17. this is very very helpful for me, i searching this for a long moment
    microstraegy training in chennai

    ReplyDelete
  18. great stuff budd!thanks for sharing! Private Angels

    ReplyDelete
  19. bro what is the name of your template.. pls tell me

    ReplyDelete

  20. Thanks for posting this useful content, Good to know about new things here, Let me share this, . Hadoop training in pune

    ReplyDelete
  21. wow awesome, good blog post, i need this for my blog.

    ReplyDelete
  22. Dear Admin, do you know that I was actually trying to find this widget, and you made my day. Thanks a lot... love u

    ReplyDelete
  23. very nice articles i like it http://naga303.com

    ReplyDelete

  24. Thanks For the Awesome Post.. Nicely Written..!

    US IT Staffing

    ReplyDelete
  25. Awesome , thanks for share,

    wellcome my blog https://hangtotnenmua.net/

    ReplyDelete
  26. nice widget thanks for sharing this,

    Pro Blog tech

    ReplyDelete
  27. Homemade Pizza-how to make mini pizza at home without microwave oven, make mini bread pizza it very easy and simple to make, see full pizza recipe on this video you can make this at home.veg cheese pizza starters for party quick recipe.

    Homemade Pizza-How to make pizza at home-mini pizza recipe-quick pizza recipe

    Cook at Kitchen

    Subscribe Now

    ReplyDelete
  28. Do this script widget make blog get heavy when open it by visitor

    ReplyDelete
  29. Thank you for sharing in this article, I can learn a lot and could also be a reference

    ReplyDelete
  30. achhi jankai di aapne......


    www.supportmeyaar.com

    ReplyDelete
  31. Very nice back to top button.I am thankful to you for sharing this in your blog. I am definitely going to add in my website

    ReplyDelete
  32. Thankyou so very much for this. I have added go to top code in my tutorial blog.

    ReplyDelete