Friday, July 27, 2018

Add Scroll to Top Button in Google AMP Blogger Template

    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.

    Google AMP has provided a special javascript to outsmart the creation of Scroll to Top button, as already exemplified in the website ampbyexample.com. That is by using javascript amp-position-observer and amp-animation.

    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>
    
    <b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
    <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 <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 != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
    <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.