Create Smooth Scrolling Effect Using CSS and HTML Only

Learn How to Create Smooth Scrolling Effect Using CSS and HTML.

To Create that Smooth Scrolling Effect, We will Use scroll-behavior property.

This tutorial can be followed by any Beginner very easily.

Code :

Result :

Output

<!DOCTYPE html>
<html>
<head>
 <title>Scrolling Effect Using CSS</title>
<style type="text/css">
 
 *{
 padding: 0px;
 margin: 0px;
}

html{
 scroll-behavior: smooth;
}

nav{
 background-color: #0000002e;
 position: fixed;
 width: 100%;
}

nav ul{
 text-align: center;
}

nav ul a li{
 display: inline-block;
 padding: 30px;
 color: white;
 transition: .2s;
}

li:hover{
 background-color: white;
 color: black;
}


.section{
 height: 750px;
}

.section-1{
 background-color: red;
}


.section-2{
 background-color: tomato;
}


.section-3{
 background-color: orange;
}


.section-4{
 background-color: purple;
}


.section-5{
 background-color: pink;
}

</style>
</head>
<body>

 <nav>
  <ul>
   <a href="#section-1">
<li>Section 1</li>
</a>
   <a href="#section-2">
<li>Section 2</li>
</a>
   <a href="#section-3">
<li>Section 3</li>
</a>
   <a href="#section-4">
<li>Section 4</li>
</a>
   <a href="#section-5">
<li>Section 5</li>
</a>
  </ul>
</nav>

 <div class="container">
  
  <div id="section-1" class="section section-1">
</div>
<div id="section-2" class="section section-2">
</div>
<div id="section-3" class="section section-3">
</div>
<div id="section-4" class="section section-4">
</div>
<div id="section-5" class="section section-5">
</div>
</div>
</body>
</html>

reecry