<nav>
  <a href="#one" class="scroll">One</a>
  <a href="#two" class="scroll">two</a>
  <a href="#three"class="scroll">three</a>
  <a href="#four" class="scroll">four</a>
  <a href="#five"class="scroll">Five</a>
  <a href="#six" class="scroll">Six</a>
</nav> 

<div id="one">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.

</div>

<div id="two">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
  
</div> 

<div id="three">

  rem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.

</div>  

<div id="four">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.

</div>

<div id="five">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.

</div>

<div id="six">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim sed tenetur quis eaque reiciendis. Nulla esse at minima. Aperiam excepturi sapiente sit culpa obcaecati cupiditate laborum fuga reprehenderit porro.
</div>

nav, div {
  margin-bottom: 10px;
}

nav {
  position: fixed;
}

window.onload = function() {

const easeInCubic = function (t) { return t*t*t } 
const scrollElems = document.getElementsByClassName('scroll');


//console.log(scrollElems);
const scrollToElem = (start, stamp, duration, scrollEndElemTop, startScrollOffset) => {
    //debugger;
    const runtime = stamp - start;
    let progress = runtime / duration;
    const ease = easeInCubic(progress);
    
    progress = Math.min(progress, 1);
    console.log(startScrollOffset,startScrollOffset + (scrollEndElemTop * ease));
    
    const newScrollOffset = startScrollOffset + (scrollEndElemTop * ease);
    window.scroll(0, startScrollOffset + (scrollEndElemTop * ease));

    if(runtime < duration){
      requestAnimationFrame((timestamp) => {
        const stamp = new Date().getTime();
        scrollToElem(start, stamp, duration, scrollEndElemTop, startScrollOffset);
      })
    }
  }

for(let i=0; i<scrollElems.length; i++){
  const elem = scrollElems[i];
  
  elem.addEventListener('click',function(e) {
    e.preventDefault();
    const scrollElemId = e.target.href.split('#')[1];
    const scrollEndElem = document.getElementById(scrollElemId);
    
    const anim = requestAnimationFrame(() => {
      const stamp = new Date().getTime();
      const duration = 1200;
      const start = stamp;
          
      const startScrollOffset = window.pageYOffset;

      const scrollEndElemTop = scrollEndElem.getBoundingClientRect().top;
            
      scrollToElem(start, stamp, duration, scrollEndElemTop, startScrollOffset);
      // scrollToElem(scrollEndElemTop);
      })
    })
  }
}