Hy Folks, In this episode of How to AMP, we go over how to create a button to seamlessly let your users navigate back to the top of the page. Stay tuned to learn about how to make the button appear after the user scrolls the top of the page out of the viewport.ЁЯСЙЁЯП╗ You already know AMP is a Google product and very lightweight and better for the performance of the website that's why lots of companies using these features. because it can make an awesome User Interface and make a better user experience.
Need :
* AMP position observer* AMP animation
Introduction
amp-position-observer combined with amp-animation can be used to implement a scroll to top button. This pattern is often used in e-commerce pages where the user has to scroll through a long list of items.
Note- Please do follow All the Steps.
Watch Video Click here
Step 1 -
Required Scripts inside the head section
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
Step 2 -
Create a button for the Scroll page to the top and add some attributes to it as you can see below.
id : moveToTop
role:button ( assign the button to div)
tabindex:0
class: move_top
on: tap:topPos.scrollTo() ( topPos is a id where page will be scroll )
scrollTo function is an inbuild AMP function.
a tap is an event when someone clicks on the div. scrollTo function will scroll the page to the given id.
<div id="moveToTop" role="button" tabindex="0" on="tap:topPos.scrollTo()" class="move_top">
MOVE TO TOP
</div>
Add CSS for it. here I have added according to myself you can add according to yourself.
.move_top {
bottom: 90px;
color: #fff;
cursor: pointer;
font-size: 18px;
font-weight: 900;
height: 36px;
line-height: 18px;
padding: 7px 0;
position: fixed;
right: 50px;
text-align: center;
text-transform: capitalize;
width: 80px;
background: #A39D9D;
opacity: 0.7;
}
OUTPUT -
This video will help you -
Step 3 -
We have added the button Move To Top but now we have to hide the button by default when the user refreshes the page it should be hidden, it will show only when the user scrolls the page. so we have AMP elements amp-animation and amp-position-observer that can be helped we can hide this by default and show it on the page scroll.
Copy the below Html and paste it after the body tag.
<div id="topPos">
<amp-position-observer layout="nodisplay" on="enter:hideAnimation.start; exit:showAnimation.start"></amp-position-observer>
</div>
<amp-animation layout="nodisplay" id="hideAnimation">
<script type="application/json">
{
"fill":"both",
"animations":[{
"selector":"#moveToTop",
"keyframes":[{
"opacity":"0","visibility":"hidden"
}]
}]
}
</script>
</amp-animation>
<amp-animation layout="nodisplay" id="showAnimation">
<script type="application/json">
{
"fill":"both",
"animations":[{
"selector":"#moveToTop",
"keyframes":[{
"opacity":"1","visibility":"visible"
}]
}]
}
</script>
</amp-animation>
*Note
id: topPos ( In step 2 we have assigned an id topPos to div. when user clicks on the Move To Top button then scrollTo function find this id and page will be scroll on that id )
amp-position-observer: This element observer the position of that button and according to it. It will fire the enter or exit event.
layout:nodisplay ( for hiding the element we used nodisplay )
on:enter:hideAnimation.start; exit:showAnimation.start;
hideAnimation and showAnimation is an Id. it will fire event animation according to the id's.
Finally, we have made the amp sticky header and footer on scroll.
Your final AMP HTML page should look like this.ЁЯСЗ
Copy the below Final HTML and Paste it into your Page.
<!DOCTYPE html>
<html amp>
<head>
<title>Hy i am AMP page</title>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="http://localhost/Tutorials/AMP/amp_erro.html">
<meta name="viewport" content="width=device-width">
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom> body { width: auto; margin: 0; padding: 0; } header { background: Tomato; color: white; font-size: 2em; text-align: center; } h1 { margin: 0; padding: 0.5em; background: white; box-shadow: 0px 3px 5px grey; } p { padding: 0.5em; margin: 0.5em; } .carousel_dots{ text-align: center; } .current { background: #6e6e6e; } button { margin: 0 3px; border: solid 1px #ccc; height: 8px; border-radius: 100%; padding: 0 3px;}.headerbar { height: 50px; position: fixed; z-index: 999; top: 0; width: 100%; display: flex; align-items: center; }.site-name { margin: auto; }
.menu {
padding-right: 320px;
}
.sidebar {
padding: 10px;
margin: 0;
}
.sidebar > li {
list-style: none;
margin-bottom:10px;
}
.sidebar a {
text-decoration: none;
}
.close-sidebar {
font-size: 1.5em;
padding-left: 5px;
}
.header{
overflow: hidden;
position:fixed;
top: 0;
}
.move_top {
bottom: 90px;
color: #fff;
cursor: pointer;
font-size: 18px;
font-weight: 900;
height: 36px;
line-height: 18px;
padding: 7px 0;
position: fixed;
right: 50px;
text-align: center;
text-transform: capitalize;
width: 80px;
background: #A39D9D;
opacity: 0.7;
}
</style>
</head>
<body>
<div id="topPos">
<amp-position-observer layout="nodisplay" on="enter:hideAnimation.start; exit:showAnimation.start">
</amp-position-observer>
</div>
<amp-animation layout="nodisplay" id="hideAnimation">
<script type="application/json">
{
"fill":"both",
"animations":[{
"selector":"#moveToTop",
"keyframes":[{
"opacity":"0","visibility":"hidden"
}]
}]
}
</script>
</amp-animation>
<amp-animation layout="nodisplay" id="showAnimation">
<script type="application/json">
{
"fill":"both",
"animations":[{
"selector":"#moveToTop",
"keyframes":[{
"opacity":"1","visibility":"visible"
}]
}]
}
</script>
</amp-animation>
<header class="header">
<div role='button' tabindex="0" on='tap:side-bar.open' class='menu'>☰</div>
<div class="site-name">Hello Folks</div>
</header>
<amp-sidebar id='side-bar' layout='nodisplay'>
<nav>
<div role='button' tabindex="0" on='tap:side-bar.close'>X</div>
<ul>
<li><a href=#>Example 1</a></li>
<li><a href=#>Example 2</a></li>
<li><a href=#>Example 3</a></li>
<li><a href=#>Example 4</a></li>
</ul>
</nav>
</amp-sidebar>
<button type="button" tabindex="0" on='tap:side-bar1.open' >Sidebar Open</button>
<amp-sidebar id='side-bar1' layout='nodisplay' side='right'>
<nav>
<div role='button' tabindex="0" on='tap:side-bar1.close'>X</div>
<ul>
<li><a href=#>AMP1</a></li>
<li><a href=#>AMP1 2</a></li>
<li><a href=#>AMP1 3</a></li>
<li><a href=#>AMP1 4</a></li>
</ul>
</nav>
</amp-sidebar>
<article>
<h1>You are Watching AMP Serires </h1>
<h1>Today we will learn How to script scroll to top button in AMP Pages </h1>
</article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum
<div id="moveToTop" role="button" tabindex="0" on="tap:topPos.scrollTo()" class="move_top">MOVE TO TOP</div>
</body>
</html>
FAQ -
Q. AMP course for beginners?
A. AMP course is available on youtube click here
Q. What is AMP and AMP introduction?
A. AMP is an open-source framework for reading more click here
Q. How to fix the AMP error?
A. You can find AMP error and resolve them using 3 methods click here
Q. How add an amp-carousel?
A. amp-carousel is a very attractive thing for any site for see more click here
Q. How to amp sidebar?
A. amp-sidebar is a very attractive thing for any site for see more click here
Yeah! You have learned ЁЯШК
I hope you understood this and like this article. if you like it so, please give feedback in the comment section.
If you have any query, feel free to ask me ЁЯШК
If any mistakes I made here, so please let me know and improve me.
Recommended Post
- String Function in PHP
- How to Submit Registration and Login Form in PHP?
- How to Get All Google play store apps List using PHP Scraper?
- How to pass a variable from the command line using PHP?
- How to Submit Registration and Login Form in PHP?
- Introduction PHP ?
- How to pass variable from command line using PHP?
- How to get meta tags in 2 easy way in PHP
- How to Reset DropDownList Selection Using jQuery
Post a Comment
Please do not enter any spam link in the comment section.