How To Add Scroll Back To Top Button To Blogger

I am going to share a Plugin or Widget that will help you visitors to attract This features is now available in all website's but don’t worry this feature can now be add to your website.

Today I am here with the cool blogger widget that is "Back To Top". If your blog topic which has longer articles, then this widget is best work for you. So have a look on complete guide discussed below to proceed. This button will appears only when user's scroll down the button will be display on the page. Hide when on top, smoothly when clicked.

Features

• Hides when on top
• Scrolls up smoothly when clicked
• Latest Model
• Font Awesome Supported

Steps To Add Animated Back To Top Widget to your Blogger

1. Go To Blogger, click Layout.
2. Click on 'Add a Gadget Link' .
3. Select 'HTML/JavaScript' from the list.
4. Copy and Paste the code into HTML/JavaScript widget.

<style>
.td-scroll-up {
  cursor: pointer;
  position: fixed;
  bottom: 4px;
  right: 5px;
  width: 40px;
  height: 40px;
  background-color: #4db2ec;
  z-index: 9999;
  transform: translate3d(0, 70px, 0);
  -webkit-transform: translate3d(0, 70px, 0);
  -moz-transform: translate3d(0, 70px, 0);
  -ms-transform: translate3d(0, 70px, 0);
  -o-transform: translate3d(0, 70px, 0);
  -webkit-transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0s;
  -moz-transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0s;
  -o-transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0s;
  transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0s;
}
.td-scroll-up-visible {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
}
.td-scroll-up .td-icon-menu-up {
  position: relative;
  color: #fff;
  font-size: 20px;
  display: block;
  text-align: center;
  width: 40px;
  top: 7px;
}
[class*="td-icon-"] {
  line-height: 1;
  text-align: center;
  display: inline-block;
}
.td-icon-menu-up:before {
  content: '\f077';
}
[class^="td-icon-"]:before, [class*=" td-icon-"]:before {
  font-family: 'FontAwesome';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
font-family: 'FontAwesome';
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
src:url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0//fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
</style>
<script>
// Back To Top
$(function(){
 $(document).on( 'scroll', function(){
  if ($(window).scrollTop() > 400) {
   $('.td-scroll-up').addClass('td-scroll-up-visible');
  } else {
   $('.td-scroll-up').removeClass('td-scroll-up-visible');
  }
 });
 $('.td-scroll-up').on('click', scrollToTop);
});
function scrollToTop() {
 verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
 element = $('body');
 offset = element.offset();
 offsetTop = offset.top;
 $('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<div class="td-scroll-up">
  <i class="td-icon-menu-up"></i>
</div>

• Save the widget.
• 
  
  That’s it!
  you are done. So above is all about Back To Top Widget. With the above method, you can easily get Back to Top button in your website very easily. So I Hope you like this, do share with others too. Leave a comment below if you have any related queries with this.

13:20