While it's impressive to implement scroll animations triggered by input buttons, the question arises: can we achieve the same effect without buttons, using only anchor tags?
Solution
To create smooth scroll animations without buttons, we can leverage anchor links coupled with the scroll-behavior property. This property, supported by modern browsers like Firefox, Chrome, and Safari, dictates the behavior of scrolling within the designated container.
To implement this solution:
Example Usage:
<code class="html"><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></code>
Browser Support:
Keep in mind that while this technique is supported by popular browsers, older versions of Internet Explorer, non-Chromium Edge, and Safari may not support it and resort to instantaneous jumping to link targets.
The above is the detailed content of Can You Create Pure CSS Scroll Animations Without Buttons?. For more information, please follow other related articles on the PHP Chinese website!