根据选择以编程方式移动滚动条-Javascript

Question

我有一个自动填充框，其中填充了选项列表。

图像如下

列表选项将使用向下箭头向下滚动。按下向下箭头时，我需要根据选择以编程方式移动滚动条。

代码如下。

HTML

<div id="search-location-result" class="autocomplete-active">
   <ul class="list-group" id="search-result-display-id">
     <li>Dallas, Texas United States</li>
     <li>Dallas, Texas United States. A long address</li>
     <li>Dallas, Texas United States. A long address</li>
     <li>Dallas, Texas United States. A long address</li>
     <li>Dallas, Texas United States. A long address</li>
     <li>Dallas, Texas United States. A long address</li>
     <li>Dallas, Texas United States. A long address</li>
   </ul>
</div>

JavaScript

$(locationField).on('keydown', function(e) {


      var key = e.keyCode,
      $selected = $(listItems).filter('.selected'),
      $current;
      // Down key press
      if ( key == 40 ) {
        if ( ! $selected.length || $selected.is(':last-child') ) {
          $current = $(listItems).eq(0);
        }
        else {
          $current = $selected.next();
        }
        var currentScroll = $current.position().top;
        $(".list-group").scrollTop(currentScroll); 
      }

    });

问题在于，根据选择，滚动条无法正确显示。

也就是说，如果我们考虑所附图片，

• 滚动条需要在前四个位置停留在顶部

• 当向下箭头选择“达拉斯”时，滚动条需要移动 土耳其，安塔利亚Kortukeli”。

关于如何解决此问题的任何想法？