Scroll to top

Introduction

amp-position-observer combined with amp-animation can be used to implement a scroll to top button. This pattern is often used in e-commerce pages where the user has to scroll through a long list of items.

Setup

Import amp-position-observer extension

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

Import amp-animation extension

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

Styles

The CSS used for these samples are included here for reference.

These rules are simply needed to make the samples work but are not fundamental to the concepts covered here.

<style amp-custom>
  :root {
    --color-primary: #005AF0;
    --color-secondary: #00DCC0;
    --color-text-light: #fff;

    --space-2: 1rem;   /* 16px */

    --box-shadow-1: 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 1px -1px rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
  }
  .scrollToTop {
    color: var(--color-text-light);
    font-size: 1.4em;
    box-shadow: var(--box-shadow-1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    outline: none;
    background: var(--color-primary);
    z-index: 9999;
    bottom: var(--space-2);
    right: var(--space-2);
    position: fixed;
    opacity: 0;
    visibility: hidden;
  }
  .spacer {
    width: 100vw;
    max-width: 700px;
    height: 200vh;
    background-color: var(--color-secondary);
  }
  /* we move the anchor down to componsate the fixed header */
  .target {
    position: relative;
  }
  .target-anchor {
    position: absolute;
    top: -72px;
    left: 0;
  }
</style>

Position observer and animation

We add an element with id top-page that we can reference later for scrolling. We use amp-position-observer to start the animation when the user starts to scroll and the element at the top is no longer visible.

This is the target.

<h3 class="target">
  <a class="target-anchor" id="top"></a>
  This is the target.
  <amp-position-observer on="enter:hideAnim.start; exit:showAnim.start" layout="nodisplay">
  </amp-position-observer>
</h3>

We use 2 amp-animation elements to trigger the visibility of the button. The first one is for making the button 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>

... and the second one is for adding the button.

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

Here is a dummy spacer.

<div class="spacer"></div>

The scroll to top button

We use the scrollTo action to scroll the page when the button is tapped. Find more about actions here.

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

Need further explanation?

If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.

Go to Stack Overflow

An unexplained feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Edit sample on GitHub

Written by @kul3r4