CSS: pure CSS scroll animation
I have been looking for a way to scroll down when clicking on a button that is located on top of a page using CSS3 only.
So I've found this tutorial: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
Demo: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
But it's a bit too advanced for my needs since I just want the browser to scroll down on a click on one button located on top of the page, so I was wondering: is it possible to do those CSS scrolls without the input buttons, just with an anchor tag?
HTML looks like this: <a href="#" class="button">Learn more</a>
I have already some CSS which I need to trigger on button click:
/* Button animation tryout. */
.animate {
animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveDown{
0% {
transform: translateY(-40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
Answer
Use anchor links and the scroll-behavior property (MDN reference) for the scrolling container:
scroll-behavior: smooth;
Browser support: Firefox 36+, Chrome 61+ (therefore also Edge 79+) and Opera 48+.
Intenet Explorer, non-Chromium Edge and (so far) Safari do not support scroll-behavior and simply "jump" to the link target.
Example usage:
<head>
<style type="text/css">
html {
scroll-behavior: smooth;
}
</style>
</head>
<body id="body">
<a href="#foo">Go to foo!</a>
<!-- Some content -->
<div id="foo">That's foo.</div>
<a href="#body">Back to top</a>
</body>
Here's a Fiddle.
And here's also a Fiddle with both horizontal and vertical scrolling.