Dengan menggabungkan pengamat posisi-amp dengan animasi amp, Anda dapat menggunakannya untuk mengimplementasikan tombol scroll to top. Pola ini sering digunakan di halaman e-commerce di mana pengguna harus menggulir daftar item yang panjang.
Impor ekstensi amp-position-observer
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
Impor ekstensi amp-animation
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
Style
CSS yang digunakan untuk sampel ini dimasukkan di sini sebagai referensi.
Aturan-aturan ini hanya diperlukan agar sampel bekerja, tetapi mereka tidak mendasar bagi konsep yang dibahas di sini.
<style amp-custom>
.scrollToTop {
color: #fafafa;
font-size: 1.4em;
box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24);
width: 50px;
height: 50px;
border-radius: 100px;
border: none;
outline: none;
background: #E91E63;
z-index: 9999;
bottom: 10px;
right: 10px;
position: fixed;
opacity: 0;
visibility: hidden;
}
#marker {
position: absolute;
top: 100px;
width: 0px;
height: 0px;
}
</style>
Scroll to top
Kami menambahkan elemen dengan id top-page yang dapat kami konsultasikan nanti untuk dipindahkan.
<div id="top-page"></div>
Kami menggunakan elemen animasi 2 amp untuk mengaktifkan visibilitas tombol. Yang pertama adalah membuat tombol terlihat ...
<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>
... dan yang kedua adalah menambahkan tombol.
<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>
Kami menggunakan amp-position-observer untuk memulai animasi saat pengguna mulai bergerak.
<div id="marker"> <amp-position-observer on="enter:hideAnim.start; exit:showAnim.start" layout="nodisplay"> </amp-position-observer> </div>
Kami menggunakan tindakan scrollTo untuk memindahkan halaman ketika tombol disentuh.
<button id="scrollToTopButton" on="tap:top-page.scrollTo(duration=200)" class="scrollToTop">⌃</button>