Testing Codepen’s new feature for progressively enhancing code hosted on your own site from a basic pre element into an interactive, editable pen. To demo this I’m using a great code snippet from Chris Ferdinandi for CSS-only smooth-scrolling.
<p id="top"> <a href="#bazinga">Go to the middle</a><br> <a href="#1@#%^-bottom">Go to the bottom</a> </p> <p> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. </p> <p id="bazinga"><a href="#1@#%^-bottom">Go to the bottom</a></p> <p> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. </p> <p id="1@#%^-bottom"><a href="#">Go back to the top</a></p>
html {
scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}