<nav>
  <p id="urlDisplay"></p>
  <ul>
    <li><a href="#section1">section1</a></li>
    <li><a href="#section2">section2</a></li>
    <li><a href="#section3">section3</a></li>
    <li><a href="#section4">section4</a></li>
    <li><a href="#section5">section5</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;
  #urlDisplay{
    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;
    }
  }
}
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;
}
View Compiled
let onHashChange = () => {  
  document.getElementById('urlDisplay').innerText = location.href;
}
window.addEventListener("hashchange", onHashChange, false);

const sectionIds = ['section1','section2','section3','section4','section5'];
let index = 0;
let changeAnchor = () => {
  location.hash = sectionIds[index++];
  if(index >= sectionIds.length){index = 0;}
};
setInterval(changeAnchor, 1000);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.