Buat Scroll to top Versi AMP Template

Mau bikin tombol Scroll ke atas atau scroll to top di blog amp? AMP Html mungkin masih terdengar baru ya bro.. karena setelah ane tes sendiri di blog satunya tuh, ternyata cepet banget keindex nya, dan memang merupakan cara untuk meningkatkan mata pencaharian di blog. hahaha ngaco gw

Oh iya, tutorial scroll to top memang banyak, tapi kalo untuk versi AMP html nya mungkin sedikit, apalagi yah... blog indo isinya copi paste doang, jalan kaga. langsung aja kita sikat abis .. ga usah basa basi lah, di blog ini cuma sebagai archived online. ora main seo seo an..... hahahaha

Cermati baik baik ya, biar ga salah... soalnya ane utak atik akhirnya nemu juga.

tempel kode ini di deretan script atau search <script nah nanti ada deretan script JS, lgsg tempel aja

[<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js" />
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>]

sekarang ke bagian CSS style nya
cari kode ini di kode html template nya <style amp-custom
nah masukin nih kode di dalam amp custom.

[.scrollToTop { cursor: pointer; color: transparent; font-size: 2.2em; width: 50px; height: 50px; border-radius: 100px; border: none; outline: none; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPY2fxKW_M-YyS5O2ZTuT-lYQp16-ayyhQQLBY6ZVKufXypI0KE28sRltILoDedsrUK82v5ml1ef5VtjTeNPEj6SpSlcqfxgaf7j1gPuV4z6Bh-23H3x-LK_J0vNBBFlctBbJrbI33OL9F/s1600/orange_arrow_up.png)no-repeat; z-index: 9999; bottom: 10px; right: 10px; position: fixed; opacity: 0; visibility: hidden; } #marker { position: absolute; top: 100px; width: 0px; height: 0px; } ]

nanti ada banyak <style amp-custom di template punya agan, lgsg tempel aja semua kode css nya ya.
Kalo mau ganti Icon Scroll to top nya, bisa di ganti background URL nya.

CSS udah. Java script udah.... sekarang tinggal bagian eksekusinya.
tempel nih kode di dalam tag body. cari kode ini <body lgsg tempel di bawah nya ya

[<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> ]

kalo kode di atas udah semua di tempel.

sekarang kebagian paling penting.
Kode di bawah ini berfungsi untuk triger mau sampe mana scroll itu ke atas. makanya kita tempel ni kode di bagian header. Cari kode <header di template agan .

[ <div id="marker"> <amp-position-observer on="enter:hideAnim.start; exit:showAnim.start" layout="nodisplay"> </amp-position-observer> </div> ]

Kalo udah semua.. tinggal tempel kode button di bagian bawah.
cari kode </body> di template agan. dan taruh kode ini di atas tag </body>

[<button id="scrollToTopButton"
on="tap:marker.scrollTo(duration=1000)"
class="scrollToTop">âš¡</button>]

Dah beres semua, gw jamin bisa, soalnya gw sendiri dah bisa.
kalo mau lihat hasil scroll to top nya, bisa cek di blog dummy kesehatan ane ya anchor text nya
medicinal plant

Baca juga nih Penting
[lock]
Tutorial ini hanya untuk Template yang menggunakan AMP HTML
Hehehe Klick bait ya gan?
maap yak
[/lock]
Masih Belum Bisa Juga ??
Ngobrol dimari... dari pada puyeng... hehehehe

Buat Scroll to top Versi AMP Template

Related Posts: