Animated Scroll To Top Widget for Blogger

Dhiraj Barnwal Thursday, 20 July 2017 46 comments

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 ;)


/* Widget by AllBloggerTricks.com */
Labels:
Google+ Pinterest

46 Comments to Animated Scroll To Top Widget for Blogger Post Yours! Read Comment Policy ▼

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

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).

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.

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



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


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

doesn't work for me why ?? please help me

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

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

Its not working. Can you fix it?

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

https://youtu.be/V7Kwqb9fpQg

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

By the way, I found a good site, welcomed Runescape

Gold
the games with me.

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

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

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

nice widget thanks i really like it.

http://www.tricksyear.com

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

great stuff budd!thanks for sharing! Private Angels

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


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

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

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

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


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

US IT Staffing

nice widget thanks for sharing this,

Pro Blog tech

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

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

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

achhi jankai di aapne......


www.supportmeyaar.com

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

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