Leaning AMP: Adding Scoll Animation to Anchor Link

Image for post
Image for post
Originally published at https://ampire.city

What Will I Learn?

Requirements:

Working Example

Full code of Smooth Scroll AMP

<!-- 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>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

Explanation

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

Travel Blogger, Web Designer & AMP Developer | Travel & History Journal: https://www.ctdots.eu | AMP Development & Web Design Tutorials: https://ampire.city

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store