Блог

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

Проблема в том, что навигация с фиксированной стороны имеет 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 ):

 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) amp;amp; 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(), потому что это плохо сказывается на доступности.

Вы можете использовать Element.scrollIntoView():

 jQuery('#fixed-side-nav a.' elemId).parents('li')[0].scrollIntoView(false);
 

(Обратите внимание, что мы используем [0] для получения элемента из объекта jQuery)

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