How to create a smooth scrolling effect with CSS?

CSS Web Development Front End Technology

To create a smooth scrolling effect with CSS, the code is as follows −

Example

<!DOCTYPE html>
<html>
<head>
<style>
   html {
      scroll-behavior: smooth;
   }
   * {
      box-sizing: border-box;
   }
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      margin: 0px;
      padding: 0px;
   }
   #firstSection {
      height: 100vh;
      background-color: rgb(119, 77, 219);
      color: white;
      padding: 20px;
   }
   #secondSection {
      height: 100vh;
      color: white;
      background-color: rgb(42, 128, 168);
      padding: 20px;
   }
   a {
      text-decoration: none;
      font-size: 20px;
      font-weight: bold;
      color: yellow;
   }
</style>
</head>
<body>
<h1>Smooth Scroll Example</h1>
<div id="firstSection">
<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
<a href="#secondSection">Click Here to Smooth Scroll to Section 2 Below</a>
</div>
<div id="secondSection">
<h2>Section 2</h2>
<a href="#firstSection">Click Me to Smooth Scroll to Section 1 Above</a>
</div>
</body>
</html>

Output

The above code will produce the following output −

On clicking the smooth scroll text we will scroll to section 2 smoothly −

AmitDiwan

Published on 08-May-2020 12:49:50

Previous Page Print Page