Skip to main content
KOMPI AJAIB

follow us

Menambahkan ScrollTo Pada Sticky Header AMP Seperti Header G+

Baca juga:

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.

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar