We use the scroll-behavior property of CSS to make smooth scrolling in CSS. Due to which we can easily scroll smooth in our web page. Where earlier JavaScript and jQuery were used for smooth scrolling, but now this work is done with the help of a property of CSS. 


How To Smooth Scroll in CSS ?


Smooth Scroll in CSS

For smooth scroll in CSS we use scroll-behavior property. The example of smooth scroll in CSS is as follows:


Example of HTML Code:

<div class="navse">
<a href="#page-1">Page 1</a>
<a href="#page-2">Page 2</a>
<a href="#page-3">Page 3</a>
</div>

<div class="containerse">
<div class="page" id="page-1">Page 1</div>
<div class="page" id="page-2">Page 2</div>
<div class="page" id="page-3">Page 3</div>
</div> code-box

Example of CSS Code:

.navse {
width: 100%;
padding: 5px;
background-color: #000;
color: #fff;
display: block;
}

.navse a {
display: inline-block;
width: 50px;
text-decoration: none;
}

.navse, .containerse {
display: block;
margin: 0 auto;
text-align: center;
}

.containerse {
width: 500px;
height: 500px;
scroll-behavior: smooth; /* For smooth scroll */
}

page {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 50px;
} code-box


Summary

In this post we learn how to smooth scroll in CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post