Menambahkan ScrollTo Pada Sticky Header AMP Seperti Header G+

Ditulis oleh: Adhy Suryadi

Ditulis pada: 9/21/2017

Pada postingan sebelumnya saya sudah membahas tentang beberapa shortcode actions AMP, di antaranya yaitu scrollTo untuk menggulung layar menuju targetnya.

Nah dengan itu kita bisa membuat efek scrollTo pada sticky header seperti sticky header Google Plus. Sudah pernah kan klik sticky header pada Google Plus? Ketika halaman digulung ke bawah dan klik sticky header maka halaman akan scroll kembali ke atas. Atau silahkan coba pada sticky header blog ini.

Dengan actions AMP scrollTo, kita bisa membuat efek yang sama seperti Google Plus pada sticky header AMP.

Caranya cukup mudah, tinggal menambahkan on='tap:totop.scrollTo' pada div sticky header (ganti kode totop dengan id paling atas di blog kita) seperti pada kode di bawah ini.

<div class='sticky_header' on='tap:totop.scrollTo'>

Namun untuk penambahan action pada tag div (bukan button), harus ditambahakan kode role='button' dan tabindex='0' jika tidak maka akan muncul error AMP. Sehingga menjadi seperti di bawah ini.

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

Bagaimana, mudah bukan?

Selamat mencoba.