<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;
      `);
    }
} 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.