リスト内の要素IDにスクロール

Question

私はアイテムの束を持つリストを持っています。特定の量のアイテムがある場合、リストはスクロールバーになり、ユーザーがボタンをクリックしてリストの一番下にあるアイテムを表示すると、自動的にそのエレメントにスクロールする必要があります。私はスクロール機能を作成しましたが、正しく動作していないようです。

Javascriptを次のようになります。

$('a').on('click', function(e){ 
    var id = $(e.currentTarget).attr('id')    // catch the ID of the clicked item 
    $('#left').animate({        // #left is the container of the list 
     scrollTop: $('#left ul li#'+id+'').offset().top // scroll to the element which metches the cliced ID 
    }, 500); 
}) 

私はシンプルJSFIDDLEを作成した - 誰かが私を助けてもらえますか？

ありがとう！

Answer 1

.offset().topは、ウィンドウに対してはオフセットを計算しますが、コンテナに対しては計算しません。 。..余分な8つのピクセルから来るが、それは働く場所を私は本当に知らない

$('a').on('click', function(e){ 
 
    var id = $(this).attr('id') 
 
    $('#left').animate({ 
 
    scrollTop: $('#left ul li#'+id+'')[0].offsetTop - 8 
 
    }, 500); 
 
})

#con { 
 

 

 
} 
 

 
#right { 
 
    float: right; 
 
} 
 

 
#right a { 
 
    display: block; 
 
} 
 

 
#left { 
 
    float: left; 
 
    height: 500px; 
 
    overflow: scroll 
 
} 
 

 
#left ul { 
 
    padding: 0; 
 
    margin-top:20px; 
 
} 
 

 
#left ul li { 
 
} 
 

 
#left ul li div { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="con"> 
 
    <div id="left"> 
 
    <ul> 
 
     <li id="1"> 
 
     <div> 
 
      Item 1 
 
     </div> 
 
     </li> 
 
     <li id="2"> 
 
     <div> 
 
      Item 2 
 
     </div> 
 
     </li> 
 
     <li id="3"> 
 
     <div> 
 
      Item 3 
 
     </div> 
 
     </li> 
 
     <li id="4"> 
 
     <div> 
 
      Item 4 
 
     </div> 
 
     </li> 
 
     <li id="5"> 
 
     <div> 
 
      Item 5 
 
     </div> 
 
     </li> 
 
     <li id="6"> 
 
     <div> 
 
      Item 6 
 
     </div> 
 
     </li> 
 
     <li id="7"> 
 
     <div> 
 
      Item 7 
 
     </div> 
 
     </li> 
 
     <li id="8"> 
 
     <div> 
 
      Item 8 
 
     </div> 
 
     </li> 
 
     <li id="9"> 
 
     <div> 
 
      Item 9 
 
     </div> 
 
     </li> 
 
     <li id="10"> 
 
     <div> 
 
      Item 10 
 
     </div> 
 
     </li> 
 
     <li id="11"> 
 
     <div> 
 
      Item 11 
 
     </div> 
 
     </li> 
 
     <li id="12"> 
 
     <div> 
 
      Item 12 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div id="right"> 
 
    <a href="#" id="1">Item1</a> 
 
    <a href="#" id="2">Item2</a> 
 
    <a href="#" id="3">Item3</a> 
 
    <a href="#" id="4">Item4</a> 
 
    <a href="#" id="5">Item5</a> 
 
    <a href="#" id="6">Item6</a> 
 
    <a href="#" id="7">Item7</a> 
 
    <a href="#" id="8">Item8</a> 
 
    <a href="#" id="9">Item9</a> 
 
    <a href="#" id="10">Item10</a> 
 
    <a href="#" id="11">Item11</a> 
 
    <a href="#" id="12">Item12</a> 
 
    </div> 
 
</div>

https://jsfiddle.net/znwjvtzg/：

ソリューションは.offsetTop

ノートを使用することです