Ditulis oleh: Ditulis pada: 2/01/2018
Scroll to top berguna untuk mempermudah pengunjung untuk kembali ke atas setelah menggulung layar ke bawah. Beberapa waktu yang lalu saya sudah memposting beberapa action pada AMP, di antaranya action untuk ScrollToTop.
Dan kini kita akan membuat tombol ScrollToTop dengan show hide tombol onscroll yang saya dapat dari halaman contoh AMP. Namun di sini saya menggunakan ikon SVG untuk tombol ScrollToTop.
Untuk efek show hide di AMP, kita menggunakan amp-position-observer dan amp-animation dan hasilnya bisa dicoba di demo berikut:
Silahkan scroll halamannya, ScrollToTop ini tidak ditampilkan di halaman static.
Jika Anda ingin mencoba menggunakannya, silahkan ikuti langkah-langkahnya berikut ini.
Silahkan simpan kedua js berikut di atas kode
</head>. Jika sudah ada di template maka silahkan lewati langkah ini.
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "error_page"'>
<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 != "static_page" and data:blog.pageType != "error_page"'>
<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 penampakannya di halaman depan dan postingan.
Mudah bukan? Selamat mencoba
Sumber: https://ampbyexample.com/visual_effects/scroll_to_top/