Create Smooth Scrolling Effect Using CSS and HTML Only

October 24, 2018

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>