This article demonstrates how to add smooth scrolling to html element via amp-animation without using javascript.
Be advised that the code below will only work with AMP for WordPress plugin, otherwise you need to add amp-animation manually.
|
1 2 3 4 5 6 7 |
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”.|
1 |
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:
|
1 |
on="tap:InsertIDhere.scrollTo(duration=200)" |
That is basically it, if you require anchor tag, you can simply wrap the button with it.
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.
|
1 2 3 |
html { scroll-behavior: smooth; } |
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