javascript - 滚动到列表内的元素 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 计算相对于窗口的偏移量，而不是相对于容器的偏移量。

解决方案是使用.offsetTop

注意:我真的不知道额外的 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/