السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Hallo Sobat, kali ini saya akan memposting tentang "Cara membuat navigasi tombol "Back to Top" pada Blog AMP HTML". Tombol Back to top sangat berguna bagi blog/website kamu yang memiliki banyak kata dalam postingan halamannya, maka dengan tombol ini akan menjadikan web kamu user friendly sehingga pengunjung lebih dimanjakan dengan tombol "Back to top" tersebut. Lalu bagaimana si cara membuatnya? Silahkan simak postingan berikut ini :
Pertama, masukkan kode berikut di dalam kode
<style amp-custom='amp-custom'>.scrollToTop{color:#ddd;
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:#00c2ff;
z-index:1000;
bottom:10px;
right:10px;
position:fixed;
opacity:0;
visibility:hidden;
cursor:pointer
}
#marker{position:absolute;
top:100px;
width:0;
height:0;
}
.scrollToTop svg{width:34px;
height:34px;
vertical-align:middle;
}
#totop:before{content:"";
display:block;
height:20px;
margin-top:-20px;
visibility:hidden;
}
Kedua, setelah kode di atas sudah dimasukkan ke dalam kode Style AMP-Custom lalu masukkan script berikut ini diatas kode
</head><script async='async' custom-element='amp-animation' src='https://cdn.ampproject.org/v0/amp-animation-0.1.js'/>
<script async='async' custom-element='amp-position-observer' src='https://cdn.ampproject.org/v0/amp-position-observer-0.1.js'/>Ketiga, setelah kode script di atas sudah dimasukkan maka masukkan kode berikut dibawah kode
<body><div id='totop'></div>Keempat, setelah kode script di atas sudah dimasukkan maka masukkan kode dibawah ini diatas kode
</body>
<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"
}]
},
{
"selector": "#halaman",
"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"
}]
},
{
"selector": "#halaman",
"keyframes": [{
"opacity": "0",
"visibility": "hidden"
}]
}]
}
</script>
</amp-animation>
<div id='marker'>
<amp-position-observer layout='nodisplay' on='enter:hideAnim.start; exit:showAnim.start'>
</amp-position-observer>
</div>
<button aria-label='Scroll To Top' class='scrollToTop' id='scrollToTopButton' on='tap:totop.scrollTo(duration=200)'>
<svg viewBox='0 0 24 24'>
<path d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='#fff'/>
</svg>
</button>
Bila semua kode sudah dimasukkan, silahkan cek kembali di website/blog kamu apakah script sudah bisa dijalankan apa belum. Selamat mencoba 😀