How to add smooth scroll to classes?

Im making my website with parallax effect, and i wanted to add smooth scroll between them.

What i want:

When you click on "go to css", it should go to parallax-2, and vice versa

Code:

<!DOCTYPE html>

<html>
    <head>
        <title>Progress bar and nav bar</title>

        <style>
          h1 {
            background-color: cyan;
          }

          html {
            scroll-behavior: smooth;
          }

          body {
            background-color: #2A2A2A;
          }

          /* The navigation bar */
          .navbar {
            overflow: hidden;
            background-color: #333;
            position: fixed;
            top: 0;
            width: 100%;
          }

          .navbar a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
          }

          .navbar a:hover {
            background: #ddd;
            color: black;
          }

          /* Avoiding overlay */
          .main {  
            margin-top: 80px;
          }

          .header {
            position: fixed;
            top: 40px;
            z-index: 1;
            width: 100%;
            background-color: #f1f1f1;
          }


          /* The progress container */
          .progress-container {
            width: 100%;
            height: 8px;
            background: #ccc;
          }


          /* The progress bar */
          .progress-bar {
            height: 8px;
            background: #04AA6D;
            width: 0%;
          }

          .parallax-1{
            width: 100%;
            height: 800px;
            background: url(
          'https://th.bing.com/th/id/OIP.oPuMi8kcLgBVijTV0HVnTgHaFj?pid=ImgDet&rs=1');
            background-size: 100% 100%;
            background-attachment: fixed;
          }

          .parallax-1 h2 {
            margin: auto;
            position: relative;
            left: 500x;
            top: 300px;
            width: 250px;
            height: 45px;
            padding: 10px;
            background-color: black;
            color: white;
            text-align: center;
          }

          .parallax-2 {
            width: 100%;
            height: 600px;
            background: url(
            'https://th.bing.com/th/id/OIP.hfYeIbz7JfL-dqiMvYrICwHaEK?pid=ImgDet&rs=1');
            background-size: 100% 100%;
            background-attachment: fixed;
          }

          /* Styling the title of second parallax */
          .parallax-2 h2 {
            margin: auto;
            position: relative;
            left: 500x;
            top: 300px;
            width: 250px;
            height: px;
            padding: 10px;
            background-color: black;
            color: white;
            text-align: center;
          }

          .para-1 {
            padding: 50px;
            background-color: #2A2A2A;
            color: white;
            font-size: 17px;
          }

          .para-2 {
            padding: 50px;
            background-color: #2A2A2A;
            color: white;
            font-size: 17px;
          }

        </style>
    </head>

    <body background-color="black">
        

        <div class="navbar">
            <a href="app.html">Home</a>
            <a href="#news">Gallery</a>
            <a href="#contact">About</a>
          </div>

          </div>
          
          <div class="header">
            <div class="progress-container">
              <div class="progress-bar" id="Bar"></div>
            </div>
          </div>

            <div class="main">

              <div class='parallax-1'>
                <h2>HTML</h2>
              </div>

              <div class="para-1">
                <p>a website made by me</p>
                <a href="parallax-2">click to go to css</a> <!-- after clicking this, you should go to parallax 2-->
              </div>

              <div class='parallax-2'>
                <h2>CSS</h2>
              </div>

              <div class="para-2">
                <p>my website</p> <!-- after clicking this, you should go to parallax 1-->
              </div>
              
              <h1>A website!!!</h1>
              <h1>A website!!!</h1>
              <h1>A website!!!</h1>
              <h1>A website!!!</h1>
              <h1>A website!!!</h1>
              <h1>A website!!!</h1>
              <h1>A website!!!</h1>
          </div>

          <script>
            window.onscroll = function() {changeOnScroll()};

            function changeOnScroll() {
              var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
              var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
              var scrolled = (winScroll / height) * 100;
              document.getElementById("Bar").style.width = scrolled + "%";
            }

          </script>
    </body>
</html>

Output : output

So, as you see, when im trying to click at "click here to go to css", a

Cannot GET /parallax-2 error comes.

can i fix this? this is not working with classes. (im not asking about Javascript, is there any way to do this only with html and css? )

Thanks!

Solution

You have to add an id to your div you want to and change you href to href="#parallax-2"

window.onscroll = function() {
  changeOnScroll()
};

function changeOnScroll() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("Bar").style.width = scrolled + "%";
}

h1 {
  background-color: cyan;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #2A2A2A;
}


/* The navigation bar */

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}


/* Avoiding overlay */

.main {
  margin-top: 80px;
}

.header {
  position: fixed;
  top: 40px;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}


/* The progress container */

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}


/* The progress bar */

.progress-bar {
  height: 8px;
  background: #04AA6D;
  width: 0%;
}

.parallax-1 {
  width: 100%;
  height: 800px;
  background: url('https://th.bing.com/th/id/OIP.oPuMi8kcLgBVijTV0HVnTgHaFj?pid=ImgDet&rs=1');
  background-size: 100% 100%;
  background-attachment: fixed;
}

.parallax-1 h2 {
  margin: auto;
  position: relative;
  left: 500x;
  top: 300px;
  width: 250px;
  height: 45px;
  padding: 10px;
  background-color: black;
  color: white;
  text-align: center;
}

.parallax-2 {
  width: 100%;
  height: 600px;
  background: url('https://th.bing.com/th/id/OIP.hfYeIbz7JfL-dqiMvYrICwHaEK?pid=ImgDet&rs=1');
  background-size: 100% 100%;
  background-attachment: fixed;
}


/* Styling the title of second parallax */

.parallax-2 h2 {
  margin: auto;
  position: relative;
  left: 500x;
  top: 300px;
  width: 250px;
  height: px;
  padding: 10px;
  background-color: black;
  color: white;
  text-align: center;
}

.para-1 {
  padding: 50px;
  background-color: #2A2A2A;
  color: white;
  font-size: 17px;
}

.para-2 {
  padding: 50px;
  background-color: #2A2A2A;
  color: white;
  font-size: 17px;
}

<!DOCTYPE html>

<html>

<head>
  <title>Progress bar and nav bar</title>

</head>

<body background-color="black">


  <div class="navbar">
    <a href="app.html">Home</a>
    <a href="#news">Gallery</a>
    <a href="#contact">About</a>
  </div>



  <div class="header">
    <div class="progress-container">
      <div class="progress-bar" id="Bar"></div>
    </div>
  </div>

  <div class="main">

    <div class='parallax-1'>
      <h2>HTML</h2>
    </div>

    <div class="para-1">
      <p>a website made by me</p>
      <a href="#parallax-2">click to go to css</a>
      <!-- after clicking this, you should go to parallax 2-->
    </div>

    <div class='parallax-2' id="parallax-2">
      <h2>CSS</h2>
    </div>

    <div class="para-2">
      <p>my website</p>
      <!-- after clicking this, you should go to parallax 1-->
    </div>

    <div id="news">
      <h1>NEWS</h1>

      <h1>A website!!!</h1>
      <h1>A website!!!</h1>
      <h1>A website!!!</h1>
      <h1>A website!!!</h1>
      <h1>A website!!!</h1>
      <h1>A website!!!</h1>
      <h1>A website!!!</h1>
    </div>
  </div>


</body>

</html>