Adding Smooth Scroll to anchor link on AMP Website

What Will I Learn?

This article demonstrates how to add smooth scrolling to html element via amp-animation without using javascript.

Requirements:

• AMP for WordPress plugin;
• Basic CSS & HTML knowledge;

Useful links:

• AMP for WordPress: https://wordpress.org/plugins/amp/
• AMP.dev: https://amp.dev/documentation/components/amp-animation/

Full code of Smooth Scroll AMP

Be advised that the code below will only work with AMP for WordPress plugin, otherwise you need to add amp-animation manually.

<!-- Pseudo anchor button -->
<button id="PseudoAnchorElement"
  on="tap:IDofElement.scrollTo(duration=200)"
  class="SmoothScrollElement"><!-- Content within pseudo anchor element --></button>

<!-- Target -->
<div id="IDofElement"></div>

Code for manual insertion of amp-animation. I you don’t know how to do it — read my “How to Insert Code to Head or Body on AMP WordPress Tutorial”.

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

How it Works

There is not much to explain, anchor is simply not required because amp-animation works with onclick events of a button. The only important moment here is to add the ID of the element, you want the window to smooth scroll to after pushing the button, right after the tap:. Full onlick event should look like this:

on="tap:InsertIDhere.scrollTo(duration=200)"

That is basically it, if you require anchor tag, you can simply wrap the button with it.

<a><button id="PseudoAnchorElement"
  on="tap:IDofElement.scrollTo(duration=200)"
  class="SmoothScrollElement"><!-- Content within pseudo anchor element --></button></a>

CSS Smooth-Scrolling

A possible AMP-friendly CSS alternative to the AMP solution via amp-animation is scroll-behavior. Just a few simple lines can add smooth-scroll to all or chosen elements within your website. This feature is supported in all modern browsers with an exception of Safari. You can see the full lists of the supported browsers on Caniuse website. The example below will work on all global elements.

html {
  scroll-behavior: smooth;
}

Implementing Smooth Scroll effect on AMP website

If you cannot get AMP-friendly smooth scroll to work on your website, be sure to hire a professional.

 

Originally posted on 9/11/2019
Versions:
WordPress 5.2.3
AMP 1.2.2