<nav>
  <ul> 
    <li class="sectButton"> 1 </li>
    <li class="sectButton"> 2 </li>
    <li class="sectButton"> 3</li>
    <li class="sectButton"> 4</li>
  </ul>
</nav>
<main>
  <div class="main_wrapper">
    <section>1</section>
    <section>2</section>
    <section>3</section>
    <section>4</section>
  </div>
</main>

* {
  margin: 0;
  padding: 0;
  position: relative;
}

body,html {
  max-width: 100vw;
  height: 100vh;
}

ul {
  display: flex;
  width: 100%;
  height: 40px;
  background: red;
  z-index: 99999;
}

ul li {
  list-style-type: none;
  width: 5%;
  margin: auto 2%;
  background: white;
  cursor: pointer;
    text-align: center;
}

main {
  width: 100%;
  height: 100%;
  background: blue;
  overflow: hidden;
  transition: 2s;
}

.main_wrapper {
  width: 70%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
}

.main_wrapper section {
  width: 100%;
  height: 100%;
  background: black;
  color: white;
  font-size: 5vw;
}

const li = document.querySelectorAll('.sectButton');
const wrapper = document.querySelector('.main_wrapper')
const section = document.querySelectorAll('.main_wrapper > section');

(function Scrolling_main() { 
    li.forEach( (el,i) => { 
        el.onclick = () => { 
            const y = section[i].offsetTop;
            wrapper.setAttribute('style' , `
                transform: translate( 0 , -${y}px);
                transition: 0.8s;
                transition-timing-function: ease-in;
            `);
            reference(i)
            activatedBT(el)
        }
    })
})();

function activatedBT(activeBT) {
  li.forEach( button => {
      button == activeBT ?
      button.setAttribute("style", `background:yellow`):
      button.setAttribute("style", `background:white`)
  })
}

function reference (data){
    window.onresize = () => {
      const y = section[data].offsetTop;
      wrapper.setAttribute('style' , `
        transform: translate( 0 ,-${y}px);
        transition: 0s;
      `);
    }
}