Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I create a smooth scrolling effect using only CSS?
Asked on Jan 31, 2026
Answer
To create a smooth scrolling effect using only CSS, you can utilize the `scroll-behavior` property. This property allows you to define how the scrolling should behave when a user navigates to an anchor link within the page.
<!-- BEGIN COPY / PASTE -->
<style>
html {
scroll-behavior: smooth;
}
</style>
<a href="#section2">Go to Section 2</a>
<div style="height: 1000px;"></div> <!-- Just to create some space -->
<h2 id="section2">Section 2</h2>
<!-- END COPY / PASTE -->Additional Comment:
- The `scroll-behavior: smooth;` property is applied to the `html` element to ensure all anchor links on the page will scroll smoothly.
- This property is supported in most modern browsers, but not in Internet Explorer.
- Ensure your page has enough content or space to scroll, as demonstrated with the placeholder `div` for height.
Recommended Links:
