頁面正文滾動時如何滾動元素？

Question

我有一個固定的側導航，上面有一長串跳轉鏈接。 當用戶滾動主頁內容時，跳轉鏈接會突出顯示以顯示用戶在列表中的位置。

問題是固定側導航有溢出-y：滾動； 當鏈接突出顯示時，這實際上不會向上或向下滾動。

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() 的情況下執行此操作，因為這不利於可訪問性。

Answer 1

您可以使用Element.scrollIntoView() ：

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

（注意我們使用[0]從 jQuery 對象中獲取元素）

此 function 還具有一些您可以使用的 animation 選項，請閱讀鏈接文檔。