<div id="page1" class="table page1">
  <h1>Page 1 - <a href="http://www.pmob.co.uk/temp2/scroll-fixed-background.html" target="_blank">Full Page example</a></h1>
  <p>Scroll with mouse or scrolbar to see fixed background scroll if <a href="https://caniuse.com/#feat=css-scroll-behavior">scroll-behaviour</a> not supported.</p>

  <ul>
    <li><a href="#page2">Go to Page 2</a></li>
    <li><a href="#page3">Go to Page 3</a></li>
    <li><a href="#page4">Go to Page 4</a></li>
    <li><a href="#page5">Go to Page 5</a></li>
  </ul>
  <div class="hole"><span></span></div>
</div>
<div id="page2" class="table page2">
  <h2>Page 2</h2>
  <ul>
    <li><a href="#page1">Go to Page 1</a></li>
    <li><a href="#page3">Go to Page 3</a></li>
    <li><a href="#page4">Go to Page 4</a></li>
    <li><a href="#page5">Go to Page 5</a></li>
  </ul>
</div>
<div id="page3" class="table page3">
  <h2>Page 3</h2>
  <ul>
    <li><a href="#page1">Go to Page 1</a></li>
    <li><a href="#page2">Go to Page 2</a></li>
    <li><a href="#page4">Go to Page 4</a></li>
    <li><a href="#page5">Go to Page 5</a></li>
  </ul>
</div>
<div id="page4" class="table page4">
  <h2>Page 4</h2>
  <ul>
    <li><a href="#page1">Go to Page 1</a></li>
    <li><a href="#page2">Go to Page 2</a></li>
    <li><a href="#page3">Go to Page 3</a></li>
    <li><a href="#page5">Go to Page 5</a></li>
  </ul>
</div>

<div id="page5" class="table page5">
  <h2>Page 5</h2>
  <ul>
    <li><a href="#page1">Go to Page 1</a></li>
    <li><a href="#page2">Go to Page 2</a></li>
    <li><a href="#page3">Go to Page 3</a></li>
    <li><a href="#page4">Go to Page 4</a></li>
  </ul>
</div>
html,
body,
.table {
  margin: 0;
  padding: 0;
  height: 100%;
  height: 100vh;
}
html {
  overflow: hidden;
}
body {
  scroll-behavior: smooth;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
}
.table {
  width: 100%;
}
h1,
h2 {
  margin: 0;
}
.page1,.page2,.page3,.page4,.page5 {
  background: url(https://picsum.photos/id/1015/2000/1500) no-repeat
    fixed 50%;
  background-size: cover;
}
.page2 {
  background-image:url(https://picsum.photos/id/1014/2000/1500);
}
.page3 {
  background-image: url(https://picsum.photos/id/1013/2000/1500);
}
.page4 {
 background-image: url(https://picsum.photos/id/1012/2000/1500);
}
.page5 {
    background-image: url(https://picsum.photos/id/1011/2000/1500);
}

/* General styling below not needed for demo*/
.hole {
  margin: auto;
  width: 100%;
  padding: 25px 0;
  height: 150px;
  overflow: hidden;
}
.hole span {
  width: 100px;
  height: 100px;
  display: block;
  margin: auto;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 999em #fff;
}
h1,
h2 {
  text-align: center;
  font-size: 2rem;
  margin: 0;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.5);
}

ul {
  display: flex;
  max-width: 980px;
  margin: 2rem auto;
  justify-content: space-around;
  padding: 0;
  list-style: none;
}
li {
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 10px;
}
ul a {
  display: block;
  padding: 10px 20px;
  background: #000;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.5s ease;
}
a:hover {
  background: #fff;
  color: #000;
}
h1 a {
  font-size: 1.5rem;
  color: #000;
}
p {
  text-align: center;
  padding: 1rem;
  margin: 1rem;
  background: rgba(255, 255, 255, 0.7);
}
p a {
  padding: ;
}
@media screen and (max-width: 767px) {
  h1 a {
    display: block;
  }
  li {
    padding: 0;
  }
  ul a {
    padding: 10px;
  }
}
@media screen and (max-width: 580px) {
  ul {
    display: block;
    border-top: 1px solid #fff;
  }
  li a {
    display: block;
    text-align: center;
    border-radius: 0;
    border-bottom: 1px solid #fff;
  }
}
/* remove fixed attachment for ios when smooth scrolling otherwise it breaks */
@supports (-webkit-overflow-scrolling: touch) {
  .page1,
  .page3,
  .page5 {
    background: none;
  }
  body:after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: url(https://picsum.photos/id/1015/2000/1500) no-repeat
      50%;
    background-size: cover;
  }
}
// no js required as smooth scrolling is done in css for chrome and Firefox only

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.