Pure CSS scroll animation

by

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+), Safari 15.4+, Opera 48+.

Intenet Explorer, non-Chromium Edge and older versions of Safari (that are still used by some users) do not support scroll-behavior and simply “jump” to the link target (graceful degradation).

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.

More Related Contents:

  1. Transitions on the CSS display property
  2. Use CSS3 transitions with gradient backgrounds
  3. Prevent flicker on webkit-transition of webkit-transform [duplicate]
  4. Why doesn’t this a:visited css style work?
  5. How to use ‘hover’ in CSS
  6. CSS – Overflow: Scroll; – Always show vertical scroll bar?
  7. Transition background-color via slide animation
  8. How can I transition width of content with width: auto?
  9. Hover effect : expand bottom border
  10. Simulating transform-origin using translate
  11. CSS transition shorthand with multiple properties?
  12. Using CSS transitions in CSS Grid Layout
  13. CSS3 transition on click using pure CSS
  14. Two-tone background split by diagonal line using css
  15. CSS transition with visibility not working
  16. CSS transition auto height not working [duplicate]
  17. Animating max-height with CSS transitions
  18. CSS how to make an element fade in and then fade out?
  19. Scrollbar color change in Firefox
  20. CSS3 Transition – Fade out effect
  21. Flip a 3D card with CSS
  22. Less CSS: Mixins with Variable Number of Arguments
  23. Delay mouseout/hover with CSS3 transitions
  24. when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I’m animating an element with a border
  25. Have a fixed position div that needs to scroll if content overflows
  26. Image moves on hover when changing filter in chrome
  27. CSS3 transitions on pseudo-elements (:after, :before) not working?
  28. webkit transform blocking link
  29. Drawing border colors during a CSS transition
  30. Why does enabling hardware-acceleration in CSS3 slow down performance?

Leave a Comment