Cara Membuat Tombol Navigasi Back to Top yang Ringan dan Resvonsive

Tombol Navigasi Back to Top digunakan pada Template blogger untuk mengembalikan tampilan layar ke posisi atas sebelum di geser ke bawah, apabila layar tampilan blog sobat belum terdapat tombol navigasi ini silahkan simak baik - baik cara untuk mendapatkannya :

Cara yang di kerjakan :

1 . Masuk ke dahboard blogger pilih > tema > edit HTML
2. Setelah layar Edit HTML terbuka Copas Code berikut di atas ]]></b:skin>

#return-to-top{position:fixed;bottom:20px;
right:20px;background:#000;background:rgba(0,0,0,0.7);
width:50px;height:50px;display:block;text-decoration:none;
-webkit-border-radius:35px;-moz-border-radius:35px;border-radius:35px;
display:none;-webkit-transition:all .3s linear;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#return-to-top i{color:#fff;margin:0;position:relative;
left:16px;top:13px;font-size:19px;
-webkit-transition:all .3s ease;-moz-transition:all .3s ease;
-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease} #return-to-top:hover{background:rgba(0,0,0,0.9)}
 #return-to-top:hover i{color:#fff;top:5px}

3. Selanjutnya Copykan Code berikut diatas </body>

<script type='text/javascript'>
 //<![CDATA[
 $(window).resize(function () {
 var w = $(window).width();
 if (w > 800 && menu.is(':hidden')) {
 menu.removeAttr('style');
 }
 });
});
 $(window).scroll(function() {
   if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
  $('#return-to-top').fadeIn(200); // Fade in the arrow }
  else {
  $('#return-to-top').fadeOut(200); // Else fade out the arrow
 }
 });
 $('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
 scrollTop : 0 // Scroll to top of body
 }, 500);
 });
 //]]>
</script>

4.Simpan Tema dan Lihat hasilnya . .

Terimakasih untuk membaca Cara Membuat Tombol Navigasi Back to Top yang Ringan dan Resvonsive
semoga bermanfaat

Tweet