A Pen by David Cochran.

Create-Nav-Items-from-Element-Ids.markdown

Create Nav Items from Element Id's

A Pen by David Cochran on CodePen.

License.

index.html

<div id="navbar">
  <ul>
    
  </ul>
</div>
<div id="steps">
<div class="step" id="one">
</div>
<div class="step" id="two">
</div>
<div class="step" id="three">
</div>
<div class="step" id="four">
</div>
<div class="step" id="five">
</div>
<div class="step" id="six">
</div>
<div class="step" id="seven">
</div>
</div>

script.js

//
// Create nav items for each step
// Link to step id's
//
// Based on http://stackoverflow.com/questions/7115022/how-do-i-enumerate-all-of-the-html-ids-in-a-document-with-javascript
//
var allSteps = $('.step'); // build a jQuery object with all steps and their properties
for (var i = 0, n = allSteps.length; i < n; ++i) { // for each step, add a nav item linked to its id
  var el = allSteps[i];
  if (el.id) {
    $('#navbar ul').append('<li><a href="#' + el.id + '">' + (i+1) + '</a></li>');
  }
}

// Animate scroll to page anchor
$('#navbar [href^=#]').click(function (e) {
  e.preventDefault();
  var div = $(this).attr('href');
  $("html, body").animate({
    scrollTop: $(div).position().top
  }, "slow", "swing");
});

style.less

#navbar {
  padding-top: 20px;
  width: 40px;
  position: fixed;
  ul {
      padding: 0;
      margin: 0;
    li {
       float: left;
       a {
          display: block;
          background: #ccc;
          padding: 10px 20px;
          margin-bottom: 4px;
          text-decoration: none;
          color: #555;
          &:hover {
            background: #999;
            color: white;
          }
        }
      }
    }
}

#steps {
  margin-left: 80px;
}
.step {
  position: relative;
  height: 200px;
  padding: 20px;
  background-color: #aaa;
  clear: both;
  margin-top: 10px;
  &:before {
    content: attr(id);
    color: white;
    font-size: 2em;
    position: absolute;
    top: 10px;
    left: 20px;
  }
}