Animated Scroll To Top Widget for Blogger

Posted On // 45 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 */

45 comments

21 March 2016 at 09:33

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

Reply
21 March 2016 at 09:50

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

Reply
Dolor Dota Author
22 March 2016 at 16:24


why encrypt the codes ?

Reply
22 March 2016 at 23:02

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.

Reply
Sudheer Yadav Author
8 April 2016 at 03:49

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

Reply
deeksha Author
12 April 2016 at 05:32



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

Reply
23 April 2016 at 07:23


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

Reply
23 April 2016 at 20:55

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

Reply
23 April 2016 at 21:02

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

Reply
TheSmashyTut Author
10 June 2016 at 21:28

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

Reply
SAIKISITE Author
5 July 2016 at 10:28

Its not working. Can you fix it?

Reply
6 July 2016 at 00:45

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

https://youtu.be/V7Kwqb9fpQg

Reply
7 July 2016 at 10:07

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

Reply
Ondina Author
10 July 2016 at 18:14

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

Gold
the games with me.

Reply
karthireva Author
12 July 2016 at 02:48

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

Reply
lucky tenand Author
15 July 2016 at 09:44
15 July 2016 at 12:05

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

Reply
pakancil Author
27 July 2016 at 09:46

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

Reply
Babar Ali Author
4 August 2016 at 04:15

nice widget thanks i really like it.

http://www.tricksyear.com

Reply
Music Album Author
28 August 2016 at 15:02

thanks for share bro
It's easy to care for dogs

Reply
UMA MAHESWARI Author
26 September 2016 at 00:43

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

Reply
UMA MAHESWARI Author
26 September 2016 at 00:44

Very nice and awesome article. Thanks
oracle training in chennai

Reply
30 September 2016 at 08:45

Nice article thanks for sharing with us.
examtapasya
ctet
resultview

Reply
16 October 2016 at 11:25
Fathima Fazal Author
23 October 2016 at 04:39

Amazing psot.. with all details SAP Training in Chennai

Reply
Darla Author
26 October 2016 at 10:07

great stuff budd!thanks for sharing! Private Angels

Reply
Aman Author
1 November 2016 at 00:32

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

Reply
24 November 2016 at 02:39


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

Reply
Nestor Paul Author
7 December 2016 at 06:05

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

Reply
Akas Davraz Author
18 December 2016 at 00:43

that's awsome

Reply
24 December 2016 at 22:38

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

Reply
3 January 2017 at 05:08

Happy New Years

Reply
obat aborsi Author
13 January 2017 at 15:38

nice information, goodjob

Reply
donny wijaya Author
17 January 2017 at 23:44

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

Reply
30 January 2017 at 10:15


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

US IT Staffing

Reply
8 March 2017 at 23:34

Awesome , thanks for share,

wellcome my blog https://hangtotnenmua.net/

Reply
Youth Vocal Author
9 March 2017 at 02:27

nice widget thanks for sharing this,

Pro Blog tech

Reply
Vktech zone Author
15 March 2017 at 23:01

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

Reply
Adi Jaya Author
16 March 2017 at 01:13

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

Reply
23 March 2017 at 21:26

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

Reply
25 March 2017 at 03:26

achhi jankai di aapne......


www.supportmeyaar.com

Reply
QuestionReply Author
14 April 2017 at 09:50

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

Reply
11 May 2017 at 00:12

nice widget, thank for share giảm giá

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Animated Scroll To Top Widget for Blogger |