Animated Scroll To Top Widget for Blogger

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

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

.scroll-top img{
margin: -12px 0 0 5px;

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

<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
        if (jQuery(this).scrollTop() > wnHeight/2) {
        } else {

    //Click event to scroll to top
        jQuery('html, body').animate({scrollTop : 0},800);


</script><!-- Widget  by -->

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


21 March 2016 at 22:03

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

Dhiraj Author
21 March 2016 at 22:20

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

Yücel Author
23 March 2016 at 04:54

why encrypt the codes ?

Dhiraj Author
23 March 2016 at 11:32

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.

Sudheer Yadav Author
8 April 2016 at 16:19

I was looking for this from a long time I will use this on my movie blog

deeksha Author
12 April 2016 at 18:02

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

Unknown Author
23 April 2016 at 19:53

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

Unknown Author
24 April 2016 at 09:25

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

Unknown Author
24 April 2016 at 09:32

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

11 June 2016 at 09:58

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

5 July 2016 at 22:58

Its not working. Can you fix it?

Anonymous Author
6 July 2016 at 13:15

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

7 July 2016 at 22:37

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

Ondina Author
11 July 2016 at 06:44

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

the games with me.

karthireva Author
12 July 2016 at 15:18

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

Unknown Author
15 July 2016 at 22:14
16 July 2016 at 00:35

Very nice and awesome article. Thanks . I,m also share many tutorials and improvement of your article on my own blog. Thanks again

pakancil Author
27 July 2016 at 22:16

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

Babar Ali Author
4 August 2016 at 16:45

nice widget thanks i really like it.

Unknown Author
29 August 2016 at 03:32

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

Unknown Author
26 September 2016 at 13:13

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

Unknown Author
26 September 2016 at 13:14

Very nice and awesome article. Thanks
oracle training in chennai

30 September 2016 at 21:15

Nice article thanks for sharing with us.

qqq Author
16 October 2016 at 23:55
Unknown Author
23 October 2016 at 17:09

Amazing psot.. with all details SAP Training in Chennai

Darla Author
26 October 2016 at 22:37

great stuff budd!thanks for sharing! Private Angels

Aman Author
1 November 2016 at 13:02

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

24 November 2016 at 16:09

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

Nestor Paul Author
7 December 2016 at 19:35

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

Akas Davraz Author
18 December 2016 at 14:13

that's awsome

25 December 2016 at 12:08

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

3 January 2017 at 18:38

Happy New Years

obat aborsi Author
14 January 2017 at 05:08

nice information, goodjob

Unknown Author
18 January 2017 at 13:14

very nice articles i like it

Unknown Author
30 January 2017 at 23:45

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

US IT Staffing

qqq Author
9 March 2017 at 13:04

Awesome , thanks for share,

wellcome my blog

Unknown Author
9 March 2017 at 15:57

nice widget thanks for sharing this,

Pro Blog tech

VKtech Zone Author
16 March 2017 at 11:31

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

16 March 2017 at 13:43

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

24 March 2017 at 09:56

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

ketan Author
25 March 2017 at 15:56

achhi jankai di aapne......

QuestionReply Author
14 April 2017 at 22:20

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

Khánh Author
11 May 2017 at 12:42

nice widget, thank for share giảm giá

Newbie Niche Author
6 November 2017 at 15:52

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


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 |