Home > Article > Web Front-end > Can I Trigger CSS Scroll Animation with Just an Anchor Tag?
Can I Trigger CSS Scroll Animation with Just an Anchor Tag?
- Linda HamiltonOriginal
- 2024-10-30 00:49:29279browse
Achieving Smooth CSS Scroll Animation
Question:
Is it possible to trigger CSS scroll animation simply by clicking an anchor tag, without the need for input buttons?
Answer:
Yes, it is possible to achieve scroll animation with CSS3 and anchor tags.
Implementation:
To implement this feature, use anchor links and the scroll-behavior property for the scrolling container. The following CSS ruleset will provide smooth scrolling behavior:
<code class="css">scroll-behavior: smooth;</code>
Browser Support:
This technique is supported by modern browsers such as Firefox 36 , Chrome 61 , Safari 15.4 , and Opera 48 .
Example Usage:
Consider the following HTML and CSS code:
<code class="html"><head>
<style type="text/css">
html {
scroll-behavior: smooth;
}
</style>
</head>
<body id="body">
<a href="#foo">Go to foo!</a>
</body></code>
When the user clicks on the "Go to foo!" link, the browser will smoothly scroll down to the element with the id of "foo".
Note: Internet Explorer, non-Chromium Edge, and older versions of Safari do not support scroll-behavior. In these browsers, the scroll action will not be smooth.
The above is the detailed content of Can I Trigger CSS Scroll Animation with Just an Anchor Tag?. For more information, please follow other related articles on the PHP Chinese website!