Smooth Scrolling On Click Using CSS

April 30, 2021

In this tutorial, we will learn how to do smooth scrolling with the click of an anchor tag using pure HTML and CSS😃.

  1. Create an empty folder and within the folder create two files one called index.css and index.html
  2. within your HTML file add the following code.
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <title>Document</title>
  </head>
  <body>
    <nav>
      <a href="#1">1</a>
      <a href="#2">2</a>
      <a href="#3">3</a>
    </nav>
    <div id="1">first div</div>
    <div id="2">second div</div>
    <div id="3">third div</div>
  </body>
</html>
  1. Within your CSS file add the following code
body {
margin: 0px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

nav {
background-color: purple;
padding: 2em 0;
text-align: center;
}

nav a {
color: #ffffff;
margin: 0 1em;
text-decoration: none;
}

div {
display: flex;
align-items: center;
justify-content: center;
height: 800px;
width: 99em;
border-top: 1px solid black;
}
  1. Now we will have a basic page with a navbar that when we click on number it will take us down to the div section. if we want to add smooth scrolling you need to add the following to the CSS file.
html {
scroll-behavior: smooth;
}

now you have smooth scrolling enabled with the click of an anchor tag.

Arslan,

Kematix Digital