Menambahkan Scrollto Pada Sticky Header Amp Menyerupai Header G+
Pada postingan sebelumnya aku sudah membahas ihwal beberapa shortcode actions AMP, di antaranya yakni scrollTo untuk menggulung layar menuju targetnya.Nah dengan itu kita dapat menciptakan pengaruh scrollTo pada sticky header menyerupai 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 dapat menciptakan pengaruh yang sama menyerupai Google Plus pada sticky header AMP.
Caranya cukup mudah, tinggal menambahkan
on='tap:totop.scrollTo' pada div sticky header (ganti arahan totop dengan id paling atas di blog kita) menyerupai pada arahan di bawah ini. <div class='sticky_header' on='tap:totop.scrollTo'>
Namun untuk penambahan action pada tag
div (bukan button), harus ditambahakan arahan role='button' dan tabindex='0' jikalau tidak maka akan muncul error AMP. Sehingga menjadi menyerupai di bawah ini. <div class='sticky_header' on='tap:totop.scrollTo' role='button' tabindex='0'>
Bagaimana, gampang bukan?
Selamat mencoba.
Sumber https://www.kompiajaib.com/
0 Response to "Menambahkan Scrollto Pada Sticky Header Amp Menyerupai Header G+"
Posting Komentar