¿Cómo agregar un Scroll to top en AMP?

Al combinar amp-position-observer con amp-animation se puede usar para implementar un botón scroll to top. Este patrón se usa a menudo en páginas de comercio electrónico donde el usuario tiene que desplazarse por una larga lista de artículos.

Importe la extensión amp-position-observer

<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>

Importe la extensión amp-animation

<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

Estilos

El CSS utilizado para estas muestras se incluye aquí como referencia.

Estas reglas son simplemente necesarias para que las muestras funcionen, pero no son fundamentales para los conceptos que se tratan aquí.

<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

Agregamos un elemento con id top-page que podemos consultar más adelante para desplazarse.

<div id="top-page"></div>

Usamos 2 elementos de animación de amp para activar la visibilidad del botón. El primero es para hacer que el botón sea visible ...

<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>

... y el segundo es para agregar el botón.

<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>

Usamos amp-position-observer para comenzar la animación cuando el usuario comienza a desplazarse.

<div id="marker">
  <amp-position-observer on="enter:hideAnim.start; exit:showAnim.start"
    layout="nodisplay">
  </amp-position-observer>
</div>

Usamos la acción scrollTo para desplazar la página cuando se toca el botón.

<button id="scrollToTopButton"
  on="tap:top-page.scrollTo(duration=200)"
  class="scrollToTop">⌃</button>

Tags: AMP Tutorial Efectos visuales Tutorial AMP

Share: