Add scroll effect from section to section to HTML, CSS or JavaScript

I have multiple checkboxes on a page, I want that when anyone clicks on a checkbox button it scrolls to the next checkbox button section, and there's a select all button that selects all the checkboxes button, I want it to scroll to the very bottom when clicked, how should I do this. Below is my code:

.select {
  margin: 4px;
  background-color: #06213B;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.select label {
  float: left;
  line-height: 4.0em;
  width: 26.0em;
  height: 4.0em;
}

.select label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.select label input {
  position: absolute;
  display: none;
  color: #fff !important;
}


/* selects all of the text within the input element and changes the color of the text */

.select label input+span {
  color: #fff;
  font-size: 19px;
  font-weight: 500;
  font-family: default;
}


/* This will declare how a selected input will look giving generic properties */

.select input:checked+span {
  color: #ffffff;
  text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.select input:checked+span {
  background-color: #78E821;
}

input[type="checkbox"]+span:after {
  content: "Select all";
}

input[type="checkbox"]:checked+span:after {
  content: "All selected";
}

.branded {
  margin: 4px;
  background-color: #3E8BB5;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.branded label {
  float: left;
  line-height: 4.0em;
  width: 16.0em;
  height: 4.0em;
}

.branded label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.branded label input {
  position: absolute;
  display: none;
  color: #fff !important;
}


/* selects all of the text within the input element and changes the color of the text */

.branded label input+span {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  font-family: default;
}


/* This will declare how a selected input will look giving generic properties */

.branded input:checked+span {
  color: #ffffff;
  text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.branded input:checked+span {
  background-color: #78E821;
}

.branded input[type="checkbox"]+span:after {
  content: "SELECT";
}

.branded input[type="checkbox"]:checked+span:after {
  content: "SELECTED";
}

.lifepoints {
  margin: 4px;
  background-color: #3E8BB5;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.lifepoints label {
  float: left;
  line-height: 4.0em;
  width: 16.0em;
  height: 4.0em;
}

.lifepoints label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.lifepoints label input {
  position: absolute;
  display: none;
  color: #fff !important;
}


/* selects all of the text within the input element and changes the color of the text */

.lifepoints label input+span {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  font-family: default;
}


/* This will declare how a selected input will look giving generic properties */

.lifepoints input:checked+span {
  color: #ffffff;
  text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.lifepoints input:checked+span {
  background-color: #78E821;
}

.lifepoints input[type="checkbox"]+span:after {
  content: "SELECT";
}

.lifepoints input[type="checkbox"]:checked+span:after {
  content: "SELECTED";
}

.mypoints {
  margin: 4px;
  background-color: #3E8BB5;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.mypoints label {
  float: left;
  line-height: 4.0em;
  width: 16.0em;
  height: 4.0em;
}

.mypoints label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.mypoints label input {
  position: absolute;
  display: none;
  color: #fff !important;
}


/* selects all of the text within the input element and changes the color of the text */

.mypoints label input+span {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  font-family: default;
}


/* This will declare how a selected input will look giving generic properties */

.mypoints input:checked+span {
  color: #ffffff;
  text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.mypoints input:checked+span {
  background-color: #78E821;
}

.mypoints input[type="checkbox"]+span:after {
  content: "SELECT";
}

.mypoints input[type="checkbox"]:checked+span:after {
  content: "SELECTED";
}

<!doctype html>
<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" />
  <script>
    window.addEventListener('DOMContentLoaded', function() {
      const checks = document.querySelectorAll('.chk');
      const checkAll = document.getElementById('selectAll')
      document.addEventListener('click', function(e) {
        const tgt = e.target;
        if (tgt.matches('.chk')) {
          if (tgt.id === "selectAll") {
            tgt.closest('div').querySelector('i').classList[tgt.checked ? 'add' : 'remove']('fa-circle-check');
            checks.forEach(chk => {
              chk.checked = tgt.checked
              chk.closest('div').querySelector('i').classList[chk.checked ? 'add' : 'remove']('fa-circle-check');
            })
          } else {
            tgt.closest('div').querySelector('i').classList[tgt.checked ? 'add' : 'remove']('fa-circle-check');
            checkAll.checked = [...checks].slice(1).every(chk => chk.checked); // check all sub checkboxes are checked
            checkAll.closest('div').querySelector('i').classList[checkAll.checked ? 'add' : 'remove']('fa-circle-check');
          }
        }
      });
    });
  </script>
</head>

<body>
  <div class="select action">
    <label>
      <input type="checkbox" class="chk" id="selectAll" value="1"><span><i class="fa-solid fa-circle"></i> &nbsp;</span>
   </label>
  </div><br clear="all" />
  <h2>Some other place</h2><br clear="all" />
  <br clear="all" />
  <div class="branded surveys">
    <label>
      <input type="checkbox" class="chk" value="1"><span><i class="fa-solid fa-circle"></i> &nbsp;</span>
   </label>
  </div><br clear="all" />
  <h2>Some other place</h2><br clear="all" />
  <br clear="all" />
  <div class="lifepoints">
    <label>
      <input type="checkbox" class="chk" value="1"><span><i class="fa-solid fa-circle"></i> &nbsp;</span>
   </label>
  </div><br clear="all" />
  <h2>Some other place</h2>
  <br clear="all" />
  <div class="mypoints">
    <label>
      <input type="checkbox" class="chk" value="1"><span><i class="fa-solid fa-circle"></i> &nbsp;</span>
   </label>
  </div>
</body>

Any help would be welcome, please.