Memasang Back To Top di Blog

Back To Top atau yang biasa dilihat saat kalian melakukan Scroll pada blog kebawah maka Back To Top akan muncul disebelah kanan bawah untuk membuat pengunjung dapat kembali keatas lagi tanpa perlu melakukan Scroll dengan begitu akan mempermudah pengunjung bila ingin kembali lagi keatas dikarenakan mungkin saja Mouse yang digunakan Scrollnya rusak dan bisa merepotkan pengunjung bila ingin kembali keatas maka dari itu dengan menggunakan Back To Top tersebut bisa mempermudah.

Disini saya akan membahas 3 Back To Top yang bisa kalian gunakan tergantung kebutuhan sendiri, lantas apa saja yang akan saya bahas ini? Pertama Back To Top dengan CSS saja tanpa perlu menggunakan Javascript/JQuery, Kedua Back To Top dengan Javascript/JQuery, Ketiga Back To Top untuk pengguna Blog yang memakai Template/Tema Accelerated Mobile Pages atau disingkat dengan AMP yang sedang Trend sekarang karena disukai oleh Google sendiri.

Untuk pembahasan Back To Top ini akan saya bahas secara Detail agar kalian mudah untuk memahami fungsi dari Back To Top tersebut yah meski fungsinya hanya untuk kembali lagi keatas sih tapi kalian bisa memodifikasi juga untuk membuat Back To Top menjadi kebawah logikannya saat pengunjung mengklik Back To Top akan langsung kebawah gitu.

Memasang Back To Top di Blog

Pertama Dengan CSS

Pertama hanya dengan bantuan dari CSS saja seperti yang saya bahas diatas mungkin kalian bertanya apakah dengan bantuan dari CSS saja bisa ? Tentu saja bisa karena kita akan menggunakan Fungsi dari CSS Scroll-behavior.

scroll-behavior menerima dua jenis value yang pada dasarnya bisa mengaktifkan dan mematikan fitur smooth scroll.

1. auto (default).

Ini akan memberikan efek keatas kasar. Tidak akan ada animasi efek bergulir lambat atau bisa dibilang smooth.

2. smooth

Sesuai namanya, value ini akan memberikan efek transisi animasi halus saat diklik.

Untuk memasangnya diblog kalian bisa ikuti langkah dibawah ini untuk pemasangan.

Kalian masuk dulu ke bagian Edit Template untuk menambahkan CSS bila sudah Copy kode dibawah ini dan Paste tepat dibawah kode "<style>" atau diatas kode "</style>" bisa juga dibawah kode "</b:skin>".

html{scroll-behavior:smooth;}
.ScrollTop {width:50px; height:50px; position:fixed; bottom:50px; right: 50px; z-index:99; cursor:pointer; border-radius:100px; transition:all .5s; background:#ffb6c1 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
.ScrollTop:hover {opacity:0.8;background:#ffb6c1 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}

Kemudian kalian Copy kode HTML dibawah ini dan Paste tepat diatas kode "</body>"

<a href="#" class="ScrollTop"></a>

Kekurangan


Property CSS scroll-behavior mungkin tidak bekerja pada Browser versi lama. Tapi karena perkembangan website yang sangat pesat, pastinya semua orang sudah meng-uprade browsernya ke versi terbaru.

Untuk melihat hasilnya kalian bisa lihat dibawah ini :

See the Pen Smooth Back to Top Pure CSS Only by CodingT (@CodingT4) on CodePen.

Referensi : igniel

Kedua Dengan JQuery

Berbeda dengan yang pertama hanya menggunakan CSS saja tapi untuk yang kedua kita akan menggunakan bantuan tambahan dari JQuery agar tampilan Back to Top tersebut menjadi lebih bagus ditambah animasi Fade Out saat melakukan Scroll.

Untuk memasangnya sama seperti langkah pertama, untuk CSS seperti diatas

#back-to-top {
background:#49ACE1;
color:#ffffff;
padding:8px 10px;
font-size:24px;
border-radius: 22px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15), 0 1px 1px 0 rgba(0,0,0,.30);
}
.back-to-top {
position: fixed !important;
position: absolute;
bottom: 25px;
right: 20px;
z-index: 998;
}

Menambahkan kode HTML

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
  <i class='fa fa-chevron-up'> </i>
</a></div>

Menambahkan kode JQuery disimpan dibawah kode HTML tersebut

<script>//<![CDATA[
$(window).scroll(function() {
    if($(this).scrollTop() > 200) {
        $('#back-to-top').fadeIn();
    } else {
        $('#back-to-top').fadeOut();
    }
});
$('#back-to-top').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 600);
    return false;
});
//]]></script>

Untuk melihat hasil dari Back to Top tersebut bisa dilihat dibawah ini :

See the Pen Back to Top With JQuery by CodingT (@CodingT4) on CodePen.

Ketiga Untuk Blog AMP

Berbeda dengan cara Kedua diatas untuk memasang Back To Top di AMP kita tidak diperbolehkan menggunakan Javascript Internal atau dalam karena sudah di sediakan Javascript Eksternal dari AMP sendiri dan tentu saja hal ini akan membuat pusing untuk yang pertama kali menggunakan AMP tapi lambat laun bila sudah terbiasa akan mudah saja. Kalian juga bisa menggunakan cara yang Pertama karena hanya menggunakan CSS dan HTML saja.

Untuk pemasangan sedikit berbeda dari kedua cara diatas, kalian bisa ikuti langkahnya dibawah ini :

Silahkan simpan kedua Javascript berikut di atas kode </head>. Jika sudah ada di template maka silahkan lewati langkah ini.

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<script async='async' custom-element='amp-position-observer' src='https://cdn.ampproject.org/v0/amp-position-observer-0.1.js'/>
<script async='async' custom-element='amp-animation' src='https://cdn.ampproject.org/v0/amp-animation-0.1.js'/>
</b:if>

Kemudian silahkan simpan CSS berikut pada style amp-custom

/* Scroll To Top */
.scrollToTop{color:#fafafa;font-size:1.4em;box-shadow:0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);width:50px;height:50px;border-radius:100px;border:none;outline:0;background:#FF1744;z-index:9999;bottom:10px;right:10px;position:fixed;opacity:0;visibility:hidden}
#marker{position:absolute;top:100px;width:0;height:0}
.scrollToTop svg{width:34px;height:34px;vertical-align:middle;}

Untuk merubah warna tombol silahkan sesuaikan kode yang saya tandai di atas.

Kemudian di bawah kode <body> silahkan simpan kode berikut untuk target action ScrollToTop.

<div id='totop'/>

Dan terakhir silahkan simpan kode berikut di atas kode </body>

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<amp-animation id="showAnim"
  layout="nodisplay">
  <script type="application/json">
    {
      "duration": "200ms",
      "fill": "both",
      "iterations": "1",
      "direction": "alternate",
      "animations": [{
        "selector": "#scrollToTopButton",
        "keyframes": [{
          "opacity": "1",
          "visibility": "visible"
        }]
      }]
    }
  </script>
</amp-animation>
<amp-animation id="hideAnim"
  layout="nodisplay">
  <script type="application/json">
    {
      "duration": "200ms",
      "fill": "both",
      "iterations": "1",
      "direction": "alternate",
      "animations": [{
        "selector": "#scrollToTopButton",
        "keyframes": [{
          "opacity": "0",
          "visibility": "hidden"
        }]
      }]
    }
  </script>
</amp-animation>
<div id="marker">
  <amp-position-observer on="enter:hideAnim.start; exit:showAnim.start"
    layout="nodisplay">
  </amp-position-observer>
</div>
<button id="scrollToTopButton"
  on="tap:totop.scrollTo(duration=200)"
  class="scrollToTop">
<svg viewBox="0 0 24 24">
    <path fill="#fff" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
</svg>
</button>
</b:if>

Selesai, silahkan cek hasilnya di halaman depan dan postingan.

Referensi: https://ampbyexample.com/visual_effects/scroll_to_top/