Как я могу прокручивать элемент при прокрутке тела страницы?

У меня фиксированная боковая навигация с длинным списком ссылок для перехода. Когда пользователь прокручивает содержимое главной страницы, ссылки перехода выделяются, чтобы показать, где пользователь находится в списке.

Проблема в том, что фиксированная боковая навигация имеет overflow-y:scroll; и на самом деле это не прокручивается вверх или вниз, когда ссылки выделяются.

https://jsfiddle.net/nz6b7cj9/

HTML:

<div id = "container">
  <div style = "float:left">
    <div id = "fixed-side-nav">
      <ul>
        <li><a href = "link1" class = "link1">Jump links</a></li>
        <li><a href = "link2" class = "link2">Jump links</a></li>
        <li><a href = "link3" class = "link3">Jump links</a></li>
        <li><a href = "link4" class = "link4">Jump links</a></li>
        <li><a href = "link5" class = "link5">Jump links</a></li>
        <li><a href = "link6" class = "link6">Jump links</a></li>
        <li><a href = "link7" class = "link7">Jump links</a></li>
        <li><a href = "link8" class = "link8">Jump links</a></li>
        <li><a href = "link9" class = "link9">Jump links</a></li>
        <li><a href = "link10" class = "link10">Jump links</a></li>
        <li><a href = "link11" class = "link11">Jump links</a></li>
        <li><a href = "link12" class = "link12">Jump links</a></li>
        <li><a href = "link13" class = "link13">Jump links</a></li>
        <li><a href = "link14" class = "link14">Jump links</a></li>
        <li><a href = "link15" class = "link15">Jump links</a></li>
        <li><a href = "link16" class = "link16">Jump links</a></li>
        <li><a href = "link17" class = "link17">Jump links</a></li>
        <li><a href = "link18" class = "link18">Jump links</a></li>
        <li><a href = "link19" class = "link19">Jump links</a></li>
      </ul>
    </div>
  </div>

  <div id = "content" style = "float:left">
    <h2 id = "link1">
     HERE
    </h2>
    <p>Content here</p>
    <h2 id = "link2">
     HERE
    </h2>    
    <p>Content here</p>
    <h2 id = "link3">
     HERE
    </h2>        
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <h2 id = "link4">
     HERE
    </h2>    
    <p>Content here</p>
    <h2 id = "link5">
     HERE
    </h2>    
    <p>Content here</p>
    <h2 id = "link5">
     HERE
    </h2>    
    <p>Content here</p>
    <h2 id = "link6">
     HERE
    </h2>    
    <p>Content here</p>
<h2 id = "link7">
 HERE
</h2> 
    <p>Content here</p>
<h2 id = "link8">
 HERE
</h2> 
    <p>Content here</p>
<h2 id = "link9">
 HERE
</h2> 
    <p>Content here</p>
<h2 id = "link10">
 HERE
</h2> 
    <p>Content here</p>
<h2 id = "link11">
 HERE
</h2> 
    <p>Content here</p>
<h2 id = "link12">
 HERE
</h2> 
    <p>Content here</p>
<h2 id = "link13">
 HERE
</h2> 
    <p>Content here</p>
<h2 id = "link14">
 HERE
</h2> 
    <p>Content here</p>
<h2 id = "link15">
 HERE
</h2> 
    <p>Content here</p>
<h2 id = "link16">
 HERE
</h2> 
    <p>Content here</p>
<h2 id = "link17">
 HERE
</h2> 
    <p>Content here</p>
<h2 id = "link18">
 HERE
</h2> 
    <p>Content here</p>
<h2 id = "link19">
 HERE
</h2> 
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>    
  </div>
</div>

CSS:

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  position: relative;
}

#fixed-side-nav{
  border:1px solid #ededed;
    padding:10px;
    width:12%;
    background-color:#fff;
    bottom:20px;
    overflow-y:scroll;
    bottom:20px;
    position:fixed;
  top:90px;
}
#content{
  float:left;
  margin-left:200px;
  background-color:white;
  width:100%;
}

#fixed-side-nav li.active {background-color:yellow}

jQuery:

jQuery(window).on('load scroll resize', function (){

    // Assign active class to nav links while scrolling
    var windowTop = jQuery(window).scrollTop();
    jQuery('h2').each(function (index, elem) {
        var offsetTop = jQuery(elem).offset().top;
        var outerHeight = jQuery(this).outerHeight(true);

        if ( windowTop > (offsetTop - 110) && windowTop < ( offsetTop + outerHeight)) {
            var elemId = jQuery(elem).attr('id');
            jQuery('#fixed-side-nav li.active').removeClass('active');
            jQuery('#fixed-side-nav a.'+elemId).parents('li').addClass('active');
        }
    }); 
});

Есть ли способ прокрутить фиксированную боковую навигацию, чтобы отобразить выделенную ссылку? Я хочу сделать это без использования focus(), потому что это плохо для доступности.