Navigasi Scroll Back To Top Gerak Perlahan

Tombol Navigasi kembali ke atas atau sering dikenal dengan tombol back to top dimaksudkan untuk mempermudah pengunjung blog kembali ke awal artikel (atas) saat membaca pada halaman yang panjang. Banyak macam model navigasi back to top, diantaranya adalah ada yang mempunyai gerakan perlahan saat di scroll (smooth) seperti yang diuraikan pada artikel ini.

IMAGE ☑

ENTITIES ☑

Navigasi Back To Top dapat dibuat dengan 2 cara, yaitu dengan menggunakan gambar sebagai tombolnya dan dengan menggunakan html entities (karakter entitas) sebagai tombolnya.

Navigasi Back To Top dengan menggunakan gambar:
Pertama:
Letakkan jquery berikut di atas </head>. Bila template sudah ada jquery nya gumakan salah satu saja, jangan sampai ada 2 jquery.

<!--jquery-->
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'/>

Kedua:
Letakkan kode berikut di atas </body>:

<!--back to top-->
<style>
#BounceToTop {
  position:fixed;
  bottom:10px;
  right:10px;
  cursor:pointer;
  display:none;
}
</style>
<div id="BounceToTop">
<img alt="Back to top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSlp7v_GobxeR0VX2-00UyzMLT2JOporEmBcBnrpO24HcYJAxeSB_69kRQD4qtWMZfAGEFCQk0joiny5wIhw2hPrlnXRQp4qUAyFcmJLGmITfZuGI8pAyerDgTWVPB_CPG6FpmVL9S-1VX/s50-Ic42/totopdem-min.png" /></div>

<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()>100){$("#BounceToTop").fadeIn()}else{$("#BounceToTop").fadeOut()}});$("#BounceToTop").click(function(){$("body,html").animate({scrollTop:0},800).animate({scrollTop:25},200).animate({scrollTop:0},150).animate({scrollTop:10},100).animate({scrollTop:0},50)})});</script>
<!--back to top-->

--- Selesai--

Navigasi Back To Top dengan menggunakan Html Entities:
Pertama:
Letakkan Jquery seperti langkah pertama pada back to top dengan memakai gambar.

Kedua:
Letakkan kode berikut di atas </body>

<!--back to top-->
<style>
#BounceToTop2 {
 position:fixed;
 bottom:15px;
 right:10px;
 cursor:pointer;
 display:none;
 z-index:999999;
 border-radius: 50px;
 color: #fff;
 font-size: 150%;
 font-weight: 700;
 padding: 10px;
 background: #e86256 none no-repeat center 50%;
 height: 30px;
 width: 30px;
 text-align: center;
}
</style>
<div id='BounceToTop2'>&#x25B2;</div>

<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()>100){$("#BounceToTop2").fadeIn()}else{$("#BounceToTop2").fadeOut()}});$("#BounceToTop2").click(function(){$("body,html").animate({scrollTop:0},800).animate({scrollTop:25},200).animate({scrollTop:0},150).animate({scrollTop:10},100).animate({scrollTop:0},50)})});</script>
<!--back to top-->

--Selesai--

Catatan:
Jika back to top belum muncul, silahkan refresh halaman 1 atau 2 kali.