Cara Menambahkan ScrollTo Pada Sticky Header AMP

Tutorial kali ini adalah cara membuat/memberikan efek scrollto atau backtotop di sticky header, efek ini seperti sticky header yang di gunakan oleh web Google Plus. Tutorial ini berguna untuk menggantikan fitur dari Back to Top Button yang secara umum biasanya ada di blog tersebut.

Anda bisa menggunakan menu navigation sticky simple yang sudah jadi satu antara mnu nav dengan judul/header blog Anda. Trick ini dapat Anda pasangkan di blog AMP, karna tutorial ini saya dapatkan dari postingan Kompi Ajaib.

Menambahkan ScroolTo Seperti Google+

Caranya sebenarnya tidak begitu sulit, dikarenakan hanya menambahkan tag dan CSS saja dan langsung work pada blog Anda

1. Silakan Anda tambahkan on='tap:totop.scrollTo' pada tag div sticky header Anda.
2. Selanjutnya menambahkan action pada tag div, harus Anda tambahkan role='button' dan tabindex='0' kurang lebih penulisan lengkapnya seperti dibawah ini

<div class='sticky_header' on='tap:totop.scrollTo' role='button' tabindex='0'>

Note:
Silakan ganti sticky_header dengan tag sticky header Anda

3. Silakan tambahkan CSS dibawah ini di awal atau di akhiran tag style pada template blog Anda

#totop:before{content:"";display:block;height:53px;margin-top:-53px;visibility:hidden}

Baca juga : Membuat Menu Navigation Ala Arlina Design

Silakan Anda save templatenya, untuk selain AMP saya belum menguji cobanya, akan tetapi menurut saya work juga karna tidak menggunakan banyak kode.