What Will I Learn?
This article demonstrates how to add smooth scrolling to html element via
- AMP for WordPress plugin;
- Basic CSS & HTML knowledge;
You can see a working example on this website, once you scroll down a bit “scroll-to-top” button will appear on your bottom left.
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
<!-- Pseudo anchor button -->
class="SmoothScrollElement"><!-- Content within pseudo anchor element --></button<!-- Target -->
Code for manual insertion of
amp-animation. I you don’t know how to do it — read “Inserting Code to Head or Body Tutorial”.
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
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:
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>
- AMP for WordPress: https://wordpress.org/plugins/amp/
- AMP.dev: https://amp.dev/documentation/components/amp-animation/
Originally published at https://ampire.city on September 11, 2019.