AMP Google Maps Integration Example to Wordpress via AMP-Iframe

Adding Smooth Scroll to anchor link on AMP Website

,

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

What Will I Learn?

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

Requirements:

Useful links:

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.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.
<!-- 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

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

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Explanation

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>

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

Share.
the.Word

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting Connecting the Dots Journal's official website!

You got lucky! We have no ad to show to you, if youu want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.