Last active
January 11, 2018 10:39
-
-
Save nha/8858d8d2ffe30c4917ff6a7c6899a6f2 to your computer and use it in GitHub Desktop.
scrollTo event does not seem to work when inside a lightbox component.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html ⚡> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script async src="https://cdn.ampproject.org/v0.js"></script> | |
| <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> | |
| <link rel="canonical" href="https://ampbyexample.com/visual_effects/scroll_to_top/"> | |
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | |
| <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> | |
| .scrollTo { | |
| color: #fafafa; | |
| font-size: 1.4em; | |
| box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24); | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 100px; | |
| border: none; | |
| outline: none; | |
| background: #E91E63; | |
| z-index: 9999; | |
| bottom: 10px; | |
| right: 10px; | |
| position: fixed; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button on="tap:my-lightbox">Open lightbox</button> | |
| <!-- remove #amp-lightbox and .lightbox and this demo works --> | |
| <amp-lightbox id="my-lightbox" layout="nodisplay"> | |
| <div class="lightbox"> | |
| <button id="scrollToBottomButton" on="tap:bottom-id.scrollTo(duration=200,position=bottom)" class="scrollTo">^</button> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin tempor viverra. Vivamus mauris erat, euismod et viverra sed, pellentesque ut ipsum. Duis felis neque, interdum eu eros sed, egestas porttitor magna. Mauris nibh elit, pellentesque id suscipit a, fermentum id massa. Aliquam viverra ipsum lacus, eget dapibus magna scelerisque ut. Cras id augue et lacus varius laoreet. Curabitur tincidunt orci ut ex consectetur lacinia. Etiam fringilla, orci sit amet congue sollicitudin, erat purus pharetra tortor, eget efficitur nibh odio quis augue. | |
| Etiam sed quam orci. Maecenas consectetur, libero id pharetra bibendum, turpis dolor euismod sapien, quis lacinia mi orci volutpat eros. Morbi rutrum faucibus eros eget congue. In ac efficitur ex. Morbi elementum tempor mauris lobortis tempor. Praesent lacus augue, ultrices vitae ante in, commodo accumsan odio. Cras fringilla tristique lacus, sit amet sodales leo porttitor eget. Nunc molestie sollicitudin lorem, at mollis magna elementum vel. | |
| Aliquam tincidunt, quam nec fermentum viverra, orci dolor hendrerit ex, at suscipit tellus quam eu enim. Phasellus mollis dapibus nunc, vel sollicitudin dui consectetur id. Aliquam erat volutpat. Nunc arcu massa, fermentum in mauris sit amet, pulvinar feugiat tellus. Nam pretium tempus tortor sit amet venenatis. Aliquam hendrerit porta augue. Sed velit enim, rutrum vitae posuere at, suscipit in turpis. Sed porta diam sed arcu semper sollicitudin. Ut ac leo ut orci malesuada lobortis nec ac lorem. Cras nec turpis tellus. Nam vestibulum egestas ligula. Aliquam leo tortor, varius a iaculis vel, laoreet et neque. Vivamus sed mauris at sapien varius ultrices. Aliquam aliquam tincidunt ante, semper gravida nisl maximus vitae. In consectetur eleifend magna eu tincidunt. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin tempor viverra. Vivamus mauris erat, euismod et viverra sed, pellentesque ut ipsum. Duis felis neque, interdum eu eros sed, egestas porttitor magna. Mauris nibh elit, pellentesque id suscipit a, fermentum id massa. Aliquam viverra ipsum lacus, eget dapibus magna scelerisque ut. Cras id augue et lacus varius laoreet. Curabitur tincidunt orci ut ex consectetur lacinia. Etiam fringilla, orci sit amet congue sollicitudin, erat purus pharetra tortor, eget efficitur nibh odio quis augue. | |
| Etiam sed quam orci. Maecenas consectetur, libero id pharetra bibendum, turpis dolor euismod sapien, quis lacinia mi orci volutpat eros. Morbi rutrum faucibus eros eget congue. In ac efficitur ex. Morbi elementum tempor mauris lobortis tempor. Praesent lacus augue, ultrices vitae ante in, commodo accumsan odio. Cras fringilla tristique lacus, sit amet sodales leo porttitor eget. Nunc molestie sollicitudin lorem, at mollis magna elementum vel. | |
| Aliquam tincidunt, quam nec fermentum viverra, orci dolor hendrerit ex, at suscipit tellus quam eu enim. Phasellus mollis dapibus nunc, vel sollicitudin dui consectetur id. Aliquam erat volutpat. Nunc arcu massa, fermentum in mauris sit amet, pulvinar feugiat tellus. Nam pretium tempus tortor sit amet venenatis. Aliquam hendrerit porta augue. Sed velit enim, rutrum vitae posuere at, suscipit in turpis. Sed porta diam sed arcu semper sollicitudin. Ut ac leo ut orci malesuada lobortis nec ac lorem. Cras nec turpis tellus. Nam vestibulum egestas ligula. Aliquam leo tortor, varius a iaculis vel, laoreet et neque. Vivamus sed mauris at sapien varius ultrices. Aliquam aliquam tincidunt ante, semper gravida nisl maximus vitae. In consectetur eleifend magna eu tincidunt. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin tempor viverra. Vivamus mauris erat, euismod et viverra sed, pellentesque ut ipsum. Duis felis neque, interdum eu eros sed, egestas porttitor magna. Mauris nibh elit, pellentesque id suscipit a, fermentum id massa. Aliquam viverra ipsum lacus, eget dapibus magna scelerisque ut. Cras id augue et lacus varius laoreet. Curabitur tincidunt orci ut ex consectetur lacinia. Etiam fringilla, orci sit amet congue sollicitudin, erat purus pharetra tortor, eget efficitur nibh odio quis augue. | |
| Etiam sed quam orci. Maecenas consectetur, libero id pharetra bibendum, turpis dolor euismod sapien, quis lacinia mi orci volutpat eros. Morbi rutrum faucibus eros eget congue. In ac efficitur ex. Morbi elementum tempor mauris lobortis tempor. Praesent lacus augue, ultrices vitae ante in, commodo accumsan odio. Cras fringilla tristique lacus, sit amet sodales leo porttitor eget. Nunc molestie sollicitudin lorem, at mollis magna elementum vel. | |
| Aliquam tincidunt, quam nec fermentum viverra, orci dolor hendrerit ex, at suscipit tellus quam eu enim. Phasellus mollis dapibus nunc, vel sollicitudin dui consectetur id. Aliquam erat volutpat. Nunc arcu massa, fermentum in mauris sit amet, pulvinar feugiat tellus. Nam pretium tempus tortor sit amet venenatis. Aliquam hendrerit porta augue. Sed velit enim, rutrum vitae posuere at, suscipit in turpis. Sed porta diam sed arcu semper sollicitudin. Ut ac leo ut orci malesuada lobortis nec ac lorem. Cras nec turpis tellus. Nam vestibulum egestas ligula. Aliquam leo tortor, varius a iaculis vel, laoreet et neque. Vivamus sed mauris at sapien varius ultrices. Aliquam aliquam tincidunt ante, semper gravida nisl maximus vitae. In consectetur eleifend magna eu tincidunt. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin tempor viverra. Vivamus mauris erat, euismod et viverra sed, pellentesque ut ipsum. Duis felis neque, interdum eu eros sed, egestas porttitor magna. Mauris nibh elit, pellentesque id suscipit a, fermentum id massa. Aliquam viverra ipsum lacus, eget dapibus magna scelerisque ut. Cras id augue et lacus varius laoreet. Curabitur tincidunt orci ut ex consectetur lacinia. Etiam fringilla, orci sit amet congue sollicitudin, erat purus pharetra tortor, eget efficitur nibh odio quis augue. | |
| Etiam sed quam orci. Maecenas consectetur, libero id pharetra bibendum, turpis dolor euismod sapien, quis lacinia mi orci volutpat eros. Morbi rutrum faucibus eros eget congue. In ac efficitur ex. Morbi elementum tempor mauris lobortis tempor. Praesent lacus augue, ultrices vitae ante in, commodo accumsan odio. Cras fringilla tristique lacus, sit amet sodales leo porttitor eget. Nunc molestie sollicitudin lorem, at mollis magna elementum vel. | |
| Aliquam tincidunt, quam nec fermentum viverra, orci dolor hendrerit ex, at suscipit tellus quam eu enim. Phasellus mollis dapibus nunc, vel sollicitudin dui consectetur id. Aliquam erat volutpat. Nunc arcu massa, fermentum in mauris sit amet, pulvinar feugiat tellus. Nam pretium tempus tortor sit amet venenatis. Aliquam hendrerit porta augue. Sed velit enim, rutrum vitae posuere at, suscipit in turpis. Sed porta diam sed arcu semper sollicitudin. Ut ac leo ut orci malesuada lobortis nec ac lorem. Cras nec turpis tellus. Nam vestibulum egestas ligula. Aliquam leo tortor, varius a iaculis vel, laoreet et neque. Vivamus sed mauris at sapien varius ultrices. Aliquam aliquam tincidunt ante, semper gravida nisl maximus vitae. In consectetur eleifend magna eu tincidunt. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin tempor viverra. Vivamus mauris erat, euismod et viverra sed, pellentesque ut ipsum. Duis felis neque, interdum eu eros sed, egestas porttitor magna. Mauris nibh elit, pellentesque id suscipit a, fermentum id massa. Aliquam viverra ipsum lacus, eget dapibus magna scelerisque ut. Cras id augue et lacus varius laoreet. Curabitur tincidunt orci ut ex consectetur lacinia. Etiam fringilla, orci sit amet congue sollicitudin, erat purus pharetra tortor, eget efficitur nibh odio quis augue. | |
| Etiam sed quam orci. Maecenas consectetur, libero id pharetra bibendum, turpis dolor euismod sapien, quis lacinia mi orci volutpat eros. Morbi rutrum faucibus eros eget congue. In ac efficitur ex. Morbi elementum tempor mauris lobortis tempor. Praesent lacus augue, ultrices vitae ante in, commodo accumsan odio. Cras fringilla tristique lacus, sit amet sodales leo porttitor eget. Nunc molestie sollicitudin lorem, at mollis magna elementum vel. | |
| Aliquam tincidunt, quam nec fermentum viverra, orci dolor hendrerit ex, at suscipit tellus quam eu enim. Phasellus mollis dapibus nunc, vel sollicitudin dui consectetur id. Aliquam erat volutpat. Nunc arcu massa, fermentum in mauris sit amet, pulvinar feugiat tellus. Nam pretium tempus tortor sit amet venenatis. Aliquam hendrerit porta augue. Sed velit enim, rutrum vitae posuere at, suscipit in turpis. Sed porta diam sed arcu semper sollicitudin. Ut ac leo ut orci malesuada lobortis nec ac lorem. Cras nec turpis tellus. Nam vestibulum egestas ligula. Aliquam leo tortor, varius a iaculis vel, laoreet et neque. Vivamus sed mauris at sapien varius ultrices. Aliquam aliquam tincidunt ante, semper gravida nisl maximus vitae. In consectetur eleifend magna eu tincidunt. | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin tempor viverra. Vivamus mauris erat, euismod et viverra sed, pellentesque ut ipsum. Duis felis neque, interdum eu eros sed, egestas porttitor magna. Mauris nibh elit, pellentesque id suscipit a, fermentum id massa. Aliquam viverra ipsum lacus, eget dapibus magna scelerisque ut. Cras id augue et lacus varius laoreet. Curabitur tincidunt orci ut ex consectetur lacinia. Etiam fringilla, orci sit amet congue sollicitudin, erat purus pharetra tortor, eget efficitur nibh odio quis augue. | |
| Etiam sed quam orci. Maecenas consectetur, libero id pharetra bibendum, turpis dolor euismod sapien, quis lacinia mi orci volutpat eros. Morbi rutrum faucibus eros eget congue. In ac efficitur ex. Morbi elementum tempor mauris lobortis tempor. Praesent lacus augue, ultrices vitae ante in, commodo accumsan odio. Cras fringilla tristique lacus, sit amet sodales leo porttitor eget. Nunc molestie sollicitudin lorem, at mollis magna elementum vel. | |
| Aliquam tincidunt, quam nec fermentum viverra, orci dolor hendrerit ex, at suscipit tellus quam eu enim. Phasellus mollis dapibus nunc, vel sollicitudin dui consectetur id. Aliquam erat volutpat. Nunc arcu massa, fermentum in mauris sit amet, pulvinar feugiat tellus. Nam pretium tempus tortor sit amet venenatis. Aliquam hendrerit porta augue. Sed velit enim, rutrum vitae posuere at, suscipit in turpis. Sed porta diam sed arcu semper sollicitudin. Ut ac leo ut orci malesuada lobortis nec ac lorem. Cras nec turpis tellus. Nam vestibulum egestas ligula. Aliquam leo tortor, varius a iaculis vel, laoreet et neque. Vivamus sed mauris at sapien varius ultrices. Aliquam aliquam tincidunt ante, semper gravida nisl maximus vitae. In consectetur eleifend magna eu tincidunt. | |
| </p> | |
| <div id="bottom-id">BOTTOM LIGHTBOX</div> | |
| </div> | |
| </amp-lightbox> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment