Membuat Animasi Scroll Roket Back To Top Keren Untuk Blog

Pemberian animasi scroll atau tombol back to top yang akan saya bagikan kali ini. 

Pemberian scroll atau navigasi pada blog merupakan salah satu hal yang sangat penting, selain sebagai personalisasi juga guna sebagai fitur untuk mempermudah dalam pengoprasian blog. 

 

Yang saya bagikan disini adalah scroll yang berbentuk roket, dengan tampilan yang simpel dan keren tentunya.

Dan dibawah ini adalah script widget yang dapat digunakan :

<div class="scroll-top">  <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');        }    });    jQuery('.scroll-top').click(function(){        jQuery('html, body').animate({scrollTop : 0},800);        jQuery(this).addClass('scrolling');    });</script>

Untuk pemasangan pada blog:

1.  Copy script diatas
2.  Buka menu Tata Letak pada blog dan klik tambahkan Gadget
3.  Pilih HTML/JavaScript
4.  Paste Script yang sudah di copy tadi
5.  Simpan

Tambahan :
Pada script terdapat kode yang saya beri warna merah untuk mengatur ukuran gambar/icon roket scroll tersebut. Silahkan sesuaikan ukuran sesuai selera.

Selesai.

UPDATE!

Jika ingin membuat scroll animasi back to top  dengan pilihan icon silahkan klik "Membuat Animasi "Back To Top" Dengan jQuery". Pilihan ikon seperti gambar dibawah ini.

*Jika ada pertanyaan silahkan sampaikan melalui form komentar, dan jika suka dengan artikel ini silahkan dengan klik like, share, atau join fans page untuk mengetahui artikel lainnya.

Tweet

Subscribe to receive free email updates: