Assalamualaikum..Semangat Pagi..
Kali ini saya akan membahas tentang Scroll to top..
Scroll to top cukup memudahkan pembaca ketika ingin mengulangi membaca postingan dari awal kembali , jadi pembaca tidak perlu melakukan manual scroll ke atas , hanya dengan menekan sebuah icon maka halaman otomatis kembali ke paragraf awal postingan.
Berikut cara penerapannya :
Pertama simpan dan letakkan kode css bawah ini di style amp custom
/* Scroll MaringDuwur */
.scrollMaringDuwur{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:0;background:#001eff;z-index:9999;bottom:10px;right:10px;position:fixed;opacity:0;visibility:hidden}
#marker{position:absolute;top:100px;width:0;height:0}
.scrollMaringDuwur svg{width:34px;height:34px;vertical-align:middle;}
#marker{position:absolute;top:100px;width:0;height:0}
.scrollMaringDuwur svg{width:34px;height:34px;vertical-align:middle;}
Pastikan JS script amp custom sudah terpasang , jika belum letakkan terlebih dahulu JS script amp custom dibawah ini diatas kode </head><!--<head/>--> :
<script async='async' custom-element='amp-position-observer' src='https://cdn.ampproject.org/v0/amp-position-observer-0.1.js'/>
<script async='async' custom-element='amp-animation' src='https://cdn.ampproject.org/v0/amp-animation-0.1.js'/>
<script async='async' custom-element='amp-animation' src='https://cdn.ampproject.org/v0/amp-animation-0.1.js'/>
Selanjutnya letaknya kode html dibawah ini di atas kode </head><!--<head/>-->
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "error_page"'>
<amp-animation id="showAnim" layout="nodisplay">
<script type="application/json"> { "duration": "200ms", "fill": "both", "iterations": "1", "direction": "alternate", "animations": [{ "selector": "#scrollMaringDuwurButton", "keyframes": [{ "opacity": "1", "visibility": "visible" }] }] }
</script>
</amp-animation>
<amp-animation id="hideAnim" layout="nodisplay">
<script type="application/json"> { "duration": "200ms", "fill": "both", "iterations": "1", "direction": "alternate", "animations": [{ "selector": "#scrollMaringDuwurButton", "keyframes": [{ "opacity": "0", "visibility": "hidden" }] }] }
</script> </amp-animation>
<div id="marker">
<amp-position-observer on="enter:hideAnim.start; exit:showAnim.start" layout="nodisplay">
</amp-position-observer> </div> <button id="scrollMaringDuwurButton" on="tap:maringduwur.scrollTo(duration=200)" class="scrollMaringDuwur">
<svg viewBox="0 0 24 24">
<path fill="#fff" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
</svg>
</button>
</b:if>
<amp-animation id="showAnim" layout="nodisplay">
<script type="application/json"> { "duration": "200ms", "fill": "both", "iterations": "1", "direction": "alternate", "animations": [{ "selector": "#scrollMaringDuwurButton", "keyframes": [{ "opacity": "1", "visibility": "visible" }] }] }
</script>
</amp-animation>
<amp-animation id="hideAnim" layout="nodisplay">
<script type="application/json"> { "duration": "200ms", "fill": "both", "iterations": "1", "direction": "alternate", "animations": [{ "selector": "#scrollMaringDuwurButton", "keyframes": [{ "opacity": "0", "visibility": "hidden" }] }] }
</script> </amp-animation>
<div id="marker">
<amp-position-observer on="enter:hideAnim.start; exit:showAnim.start" layout="nodisplay">
</amp-position-observer> </div> <button id="scrollMaringDuwurButton" on="tap:maringduwur.scrollTo(duration=200)" class="scrollMaringDuwur">
<svg viewBox="0 0 24 24">
<path fill="#fff" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
</svg>
</button>
</b:if>
Selesai..
Sebelum menyimpan tema saya sarankan untuk mencoba dulu hasilnya dengan klik pratinjau halaman..
Selamat berkreasi..
Semangat Berbagi