Can I Trigger CSS Scroll Animation with Just an Anchor Tag?

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">
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>


  <a href="#foo">Go to foo!</a>
</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!