<nav>
  <p id="historyLengthDisplay"></p>
  <p id="urlDisplay"></p>
  <ul>
    <li><a data-anchor_id="section1" id="section1Anchor">section1</a></li>
    <li><a data-anchor_id="section2" id="section2Anchor">section2</a></li>
    <li><a data-anchor_id="section3" id="section3Anchor">section3</a></li>
    <li><a data-anchor_id="section4" id="section4Anchor">section4</a></li>
    <li><a data-anchor_id="section5" id="section5Anchor">section5</a></li>
  </ul>
  <ul>
    <li><a id="lastPage">上一頁</a></li>
    <li><a id="nextPage">下一頁</a></li>
  </ul>
</nav>
<section id="section1">section1</section>
<section id="section2">section2</section>
<section id="section3">section3</section>
<section id="section4">section4</section>
<section id="section5">section5</section>

*{
  padding: 0;
  margin: 0;
}
nav{
  position: fixed;
  width: 100%;
  background-color: #000;
  color: #FFF;
  p{
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ul{
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    a{
      font-size: 20px;
      letter-spacing: 4px;
      text-decoration: none;
      color: #FFF;
      cursor: pointer;
    }
  }
}
section{
  width: 100%;
  height: 100vh;
  font-size: 20vw;
  color: #FFF;
  line-height: 100vh;
  text-align: center;
}
#section1{
  background-color: #586E58;
}
#section2{
  background-color: #102326;
}
#section3{
  background-color: #CE332B;
}
#section4{
  background-color: #03031B;
}
#section5{
  background-color: #FDD8A1;
}

let goLastPage = () => {
  window.history.back();
}

let goNextPage = () => {
  window.history.forward();
}

let scrollToAnchorId = (anchorId) => {
  const anchorPos = document.getElementById(anchorId).getBoundingClientRect();
  const bodyPos = document.querySelector('body').getBoundingClientRect();
  const absTargetPosY = anchorPos.y - bodyPos.y;
  window.scrollTo(0, absTargetPosY);
}

let changeUrl = (anchorId) => {
  let state = { anchorId: anchorId};
  let pageName = `Anchor ${anchorId}`;
  let newUrl = location.href.split('?')[0] + `?anchor=${anchorId}`;
  window.history.pushState(state, pageName, newUrl);
}

let positionChange = (e) => {
  const anchorId = e.target.dataset.anchor_id;
  scrollToAnchorId(anchorId);
  changeUrl(anchorId);
}

let onPopState = (e) => {
  let anchorId = e.state.anchorId;
  // hard code for demo
  setTimeout( () => {
    scrollToAnchorId(anchorId)
  }, 100);
}
window.onpopstate = onPopState;

document.getElementById('section1Anchor').addEventListener("click", positionChange, false);
document.getElementById('section2Anchor').addEventListener("click", positionChange, false);
document.getElementById('section3Anchor').addEventListener("click", positionChange, false);
document.getElementById('section4Anchor').addEventListener("click", positionChange, false);
document.getElementById('section5Anchor').addEventListener("click", positionChange, false);

document.getElementById('lastPage').addEventListener("click", goLastPage, false);
document.getElementById('nextPage').addEventListener("click", goNextPage, false);

setInterval( ()=>{
  document.getElementById('historyLengthDisplay').innerText = `history length ${window.history.length}`;
  document.getElementById('urlDisplay').innerText = location.href;
}, 100)