Scroll to navigation only working from first element

by Emma Bishop

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="outer-container" class="links">
  <div id="togglemenu">
    <div class="cross">CONTENTS ON/OFF</div>
  </div>

  <nav class="nav">
    <ul class="leaders">
      <li class="active"><a href="#section1"><span>Chapter I</span> <span>Fever Hit</span></a></li>
      <li><a href="#section2"><span>Chapter II</span> <span>Defining Sublimity</span></a></li>
      <li><a href="#section3"><span>Chapter III</span> <span>The Cookbook and I</span></a></li>
      <li><a href="#section4"><span>Chapter IV</span> <span>1st, 2nd Sublimity (& Somewhere in Between)</span></a></li>
      <li><a href="#section5"><span>Chapter V</span> <span>Recipes: Longinus, Burke, Nye, Kant, Hentschläger. </span></a></li>
      <li><a href="#section6"><span>Chapter VI</span> <span>According to Vermeulen</span></a></li>
      <li><a href="#credits"><span>Suffix</span> <span>Credits & footnotes</span></a></li>
    </ul>
  </nav>


  <div id="container">
    <div id="top_holder"></div>

    <span class="anchor" id="section1"></span>
    <div class="section">
      <div class="followMeBar" style="text-align: center;">Chapter I: FEVER HIT
      </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum consectetur quam, at feugiat lacus pretium sed. Donec sit amet odio facilisis, lacinia turpis at, bibendum nibh. Suspendisse volutpat a massa nec pretium. Integer sit amet iaculis sem. Cras augue sapien, volutpat in sodales eget, efficitur id ex. Mauris non est at arcu mattis iaculis consectetur non erat. Mauris imperdiet erat ut nisi rhoncus interdum. Donec congue, ipsum condimentum iaculis porttitor, est dui pulvinar purus, eu bibendum nisi leo sed ex. Fusce imperdiet dui at auctor efficitur. Donec ut diam tincidunt, eleifend arcu eu, rutrum ex. Nullam pellentesque elementum ligula, eu feugiat quam hendrerit semper. Proin nec feugiat urna, et...

CSS

.active{
  color: red;
}
a {
  color: inherit;
}
#container {
  font-size: inherit;
  width: 600px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  /* comment next line out to test how position works without a fixed parent */
  position: fixed;
}

#outer-container {
  position: fixed;
  float: left;
  background-color: white;
  border: 1px solid #333;
  padding: 10px 20px 20px 20px;
  font-size: 20px;
  height: 100%;
  width: 600px;
}

.followMeBar {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 5px;
}

.followMeBar.fixed {
  position: fixed;
  top: 0;
  width: 750px;
  z-index: 0;
  text-align: center;
}

.followMeBar.fixed.absolute {
  position: absolute;
  text-align: center;
}

#top_holder {
  position: absolute;
  left: 0;
  top: 0;
	width: 100%;
  background-color: white;
  z-index: 2;
	}

JavaScript

function scrollNav() {
  $('.nav a').click(function() {
    //Toggle Class
    $(".active").removeClass("active");
    $(this).closest('li').addClass("active");
    
    // this section isn't doing anything and i don't know what it should do
    //  var theClass = $(this).attr("class"); // undefined, because <a> has no class
    //  console.log("theClass", theClass); // undefined
    // doesn't select anything because theClass is undefined
    //  $('.' + theClass).parent('li').addClass('active');  
		// to here
    
    
    var chapterID = $(this).attr('href');
    // this is the position of the chapter you're intereseted in, relative to the container
    var chapterPosition = $(chapterID).position().top;
    // comment out the #container position:fixed css and turn this line on, instead of the previous line.
    // you don't get sticky chapter names, but it still scrolls as expected
    // var chapterPosition = $(chapterID).position().top  - $('#container').position().top;
    console.log("chapterPosition", chapterPosition);
    // this is the current scroll position
    // because the chapter position is relative to the scrolling parent,
    // it will be negative if you're on chapter 5 and click the chapter 3 link
    var currentScrollPosition = $('#container').scrollTop();
    console.log("currentScrollPosition", currentScrollPosition);
		// scroll top moves the scroll bar to a particular position
    // this is the new position we want to scroll to
    var scrollToThisPosition = currentScrollPosition + chapterPosition;
    console.log("scrollToThisPosition", scrollToThisPosition);
		//Animate
    $('#container').stop().animate({
      scrollTop: scrollToThisPosition
    }, 400);
    return false;
  });
  // there is no html element with the class "scrollTop", so this isn't doing anything here
  $('.scrollTop a').scrollTop();
}
scrollNav();

$(".cross").show();
$(".nav").show();
$(".contents").click(function() {
  $(".nav").slideToggle("slow", function() {
...