Add Scroll to Top Button in Google AMP Blogger Template
Add Scroll to Top Button in Google AMP Blogger Template. Setup Scroll to top button blogspot blog.
Tutorial how to Add Scroll to Top Button in Google AMP Blogger Template with CSS
Scroll to top Button is useful to make it easier for visitors to go back to the top of website after scrolling down the screen.
This will make your blog visitors quickly return to the top page of your blog, and of course this is good for your blog.
Scroll to top button can not only be added to HTML based website, but also can be added to AMP based website.
How to add Scroll To Top Button on Google AMP Blogger Template?
JIf you use the Blogspot platform, based on Google AMP, of course the way to add buttons is a bit different. I will explain below.
Go to the Edit HTML dashboard in your blogger template. Then add the following javascript code before </ head>
Go to the Edit HTML dashboard in your blogger template. Then add the following javascript code before </ head>
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "error_page"'>
<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'/>
</b:if>
Copy and paste this CSS after
*Change yellow mark with your color.
The next step is to call the selector for your button. Copy and paste this code under <body>.
Last step is to put Scroll to Top button on your blog. Copy this code before </ body>
Save your template changes.
Maybe usefull, comment below for any question about this tutorial AMP Google.
<style amp-custom='amp-custom'>:
/* Scroll To Top */
.scrollToTop{cursor: pointer;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:#FF1744;z-index:9999;bottom:10px;right:10px;position:fixed;opacity:0;visibility:hidden}
#marker{position:absolute;top:100px;width:0;height:0}
.scrollToTop svg{width:34px;height:34px;vertical-align:middle;}
*Change yellow mark with your color.
The next step is to call the selector for your button. Copy and paste this code under <body>.
<div id='totop'/>Last step is to put Scroll to Top button on your blog. Copy this code before </ body>
<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": "#scrollToTopButton",
"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": "#scrollToTopButton",
"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="scrollToTopButton"
on="tap:totop.scrollTo(duration=200)"
class="scrollToTop">
<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>
Save your template changes.
Maybe usefull, comment below for any question about this tutorial AMP Google.