CSS achieves smooth scrolling effects

You can add smooth scrolling to a webpage by using the CSS scroll-behavior property, which makes the page scrolling smoother and more comfortable. Applying it to the html or body elements enables the smooth scrolling effect.

html {
  scroll-behavior: smooth;
}

CSS offers several ways to achieve smooth scrolling effects on a webpage. Here are a few methods:

1. scroll-behavior Property:

The scroll-behavior property controls the smoothness of a scroll. By default, scrolling can be abrupt, but setting this property to smooth creates a smooth scrolling effect.

html {
  scroll-behavior: smooth;
}

2. :target Pseudo-class:

Utilize the :target pseudo-class in conjunction with anchor links to smoothly scroll to a specific section on the page when a link is clicked.

HTML:

<a href="#section2">Go to Section 2</a>
<div id="section2">
  <!-- Content -->
</div>

CSS:

html {
  scroll-behavior: smooth;
}

3. JavaScript with CSS:

Using JavaScript, you can create custom smooth scrolling behavior with the scrollIntoView() method and CSS scroll-behavior.

HTML:

<a href="#" onclick="scrollToSection('section2')">Go to Section 2</a>
<div id="section2">
  <!-- Content -->
</div>

JavaScript:

function scrollToSection(sectionId) {
  const section = document.getElementById(sectionId);
  section.scrollIntoView({ behavior: 'smooth' });
}

4. CSS Transitions or Animations:

CSS transitions or animations can create smooth scrolling effects, although this method may be less straightforward and might require more specific implementation based on your needs.

For instance, animating the scrollTop property for smooth scrolling:

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory; /* Optional: for snapping effects */
}

body {
  height: 2000px; /* Height for demonstration purposes */
}

/* Add an animated scrolling effect */
.scrollable {
  transition: 0.5s ease-in-out;
}

/* Apply the class to an element (e.g., div) */
<div class="scrollable">
  <!-- Content -->
</div>

These methods offer varying degrees of control and can be chosen based on the specific requirements of your website or application. The scroll-behavior property is the simplest method, but combining JavaScript with CSS allows for more customized and controlled smooth scrolling effects.