html.de - Scrolling to an anchor given fixed position navbar | Demo #3

by SpiceLab

HTML

<div id="fixed">
  <a href="#target-1">target 1</a> | <a href="#target-2">target 2</a> | <a href="#target-3">target 3</a> | <a href="#target-4">target 4</a> | <a href="#target-5">target 5</a>
</div>

<div id="targets">
  <div id="target-1">
    <p>content-1</p>
    <p>content-1</p>
    <p>content-1</p>
    <p>content-1</p>
    <p>content-1</p>
    <p>content-1</p>
    <p>content-1</p>
    <p>content-1</p>
  </div>
  <div id="target-2">
    <p>content-2</p>
    <p>content-2</p>
    <p>content-2</p>
    <p>content-2</p>
    <p>content-2</p>
    <p>content-2</p>
    <p>content-2</p>
    <p>content-2</p>
  </div>
  <div id="target-3">
    <p>content-3</p>
    <p>content-3</p>
    <p>content-3</p>
    <p>content-3</p>
    <p>content-3</p>
    <p>content-3</p>
    <p>content-3</p>
    <p>content-3</p>
  </div>
  <div id="target-4">
    <p>content-4</p>
    <p>content-4</p>
    <p>content-4</p>
    <p>content-4</p>
    <p>content-4</p>
    <p>content-4</p>
    <p>content-4</p>
    <p>content-4</p>
  </div>
  <div id="target-5">
    <p>content-5</p>
    <p>content-5</p>
    <p>content-5</p>
    <p>content-5</p>
    <p>content-5</p>
    <p>content-5</p>
    <p>content-5</p>
    <p>content-5</p>
  </div>
</div>

CSS

body {
  padding: 0;
  margin: 50px 0 0;
  font-family: "Arial";
  font-size: 1em;
}

a {
  color: #fff;
}

#fixed {
  position: fixed;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  background:rgba(0, 0, 0, 1);
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  color: #FFF;
  padding-left: 5px;
}

#targets div {
  height: 400px;
  padding-left: 5px;
}

#targets div p {
  margin:0;
}
#target-1 {
  background: #888;
}

#target-2 {
  background: #999;
}

#target-3 {
  background: #AAA;
}

#target-4 {
  background: #BBB;
}

#target-5 {
  background: #CCC;
}

#target-1:target, 
#target-2:target, 
#target-3:target, 
#target-4:target, 
#target-5:target {
  padding-top:50px;
}
#target-1:target p:first-child, 
#target-2:target p:first-child, 
#target-3:target p:first-child, 
#target-4:target p:first-child, 
#target-5:target p:first-child {
  font-weight:bold;
}