Create Smooth Scrolling Effect Using CSS and HTML Only

Share on facebook
Share on linkedin
Share on twitter
Share on email
Use "ufd6qb86" For Offers
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 :


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

 scroll-behavior: smooth;

 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;

 background-color: white;
 color: black;

 height: 750px;

 background-color: red;

 background-color: tomato;

 background-color: orange;

 background-color: purple;

 background-color: pink;


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

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

Get 20% Off on Trading Fee Use "LG3RJV7Z"

More To Explore

Use "ufd6qb86" For Offers