如何通过点击滚动到顶部li元素？

Question

我有一个链接（左），一旦他们点击 - 我想导航并将目标元素滚动到右边的顶部。我试过.scrollTop（），但是它不起作用......在下面的例子中，我将边框设置为需要滚动到顶部的元素。我想我需要计算到元素的位置并从ul滚动高度中减去它。

$(document).ready(function() {

  var left = $('ul.list-group > li');
  var right = $('.right > p');

  left.each(function() {
    var left_id = $(this).attr('object_id');
    $(this).on('click', function() {
      right.each(function(){
      if(left_id == $(this).attr('object_id'))
        $(this).css({"border":"1px solid red"});

      $('ul.list-group').animate({
        scrollTop: $(this).offset().top
      }, 2000);

    });
  });
});
});

.wrap {
  display: flex;
}

.right {
  overflow: scroll;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">

  <div class="left">

    <ul class="list-group">
      <li class="list-group-item" object_id="1">Cras justo odio</li>
      <li class="list-group-item" object_id="2">Dapibus ac facilisis in</li>
      <li class="list-group-item" object_id="3">Morbi leo risus</li>
      <li class="list-group-item" object_id="4">Vestibulum at eros</li>
      <li class="list-group-item" object_id="5">Cras justo odio</li>
      <li class="list-group-item" object_id="6">Dapibus ac facilisis in</li>
      <li class="list-group-item" object_id="7">Morbi leo risus</li>
      <li class="list-group-item" object_id="8">Porta ac consectetur ac</li>
      <li class="list-group-item" object_id="9">Vestibulum at eros</li>
      <li class="list-group-item" object_id="10">Porta ac consectetur ac</li>
    </ul>
  </div>
  <div class="right">
    <p object_id="1">Cras justo odio</p>
    <p object_id="2">Dapibus ac facilisis in</p>
    <p object_id="3">Porta ac consectetur ac</p>
    <p object_id="4">Vestibulum at eros</p>
    <p object_id="5">Cras justo odio</p>
    <p object_id="6">Dapibus ac facilisis in</p>
    <p object_id="7">Morbi leo risus</p>
    <p object_id="8">Porta ac consectetur ac</p>
    <p object_id="9">Vestibulum at eros</p>
    <p object_id="10">Vestibulum at eros</p>
  </div>
</div>

Answer 1

第1：当你的animate()元素有自动边距时，很难控制p

第二：你需要循环遍历所有.right > p元素才能获得它的offset().top点击事件之前不在其中实际上我不知道为什么每次点击运行时点击事件内的偏移变化

3，最好使用.stop().animate()

请参阅下面的代码

$(document).ready(function() {
  var left = $('ul.list-group > li');  // left li
  var right = $('.right > p');      // right p
  var rightOffsets = [];    // array to save p offsets top
  right.each(function(){    // loop through p elements
    var getAttribute = $(this).attr('object_id'); // get this p element object_id
    rightOffsets[getAttribute] =  $(this).offset().top - $('.right').offset().top;  // get this p offset top minus the right div offset top 
  });
  left.on('click', function() {
    var left_id = $(this).attr('object_id');   // get object_id
    $('.right > p[object_id='+left_id+']').css('background','red');
    //alert(rightOffsets[left_id]);
    $('.right').stop().animate({
      scrollTop: rightOffsets[left_id] // animate the right to the offest().top for the right > p
    }, 1000);
  });
});

.wrap {
  display: flex;
}

.right {
  overflow: scroll;
  height: 100px;
}
p{
  margin : 0;
  padding : 10px;
  height : 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">

<div class="left">

  <ul class="list-group">
    <li class="list-group-item" object_id="1">Cras justo odio</li>
    <li class="list-group-item" object_id="2">Dapibus ac facilisis in</li>
    <li class="list-group-item" object_id="3">Morbi leo risus</li>
    <li class="list-group-item" object_id="4">Vestibulum at eros</li>
    <li class="list-group-item" object_id="5">Cras justo odio</li>
    <li class="list-group-item" object_id="6">Dapibus ac facilisis in</li>
    <li class="list-group-item" object_id="7">Morbi leo risus</li>
    <li class="list-group-item" object_id="8">Porta ac consectetur ac</li>
    <li class="list-group-item" object_id="9">Vestibulum at eros</li>
    <li class="list-group-item" object_id="10">Porta ac consectetur ac</li>
  </ul>
</div>
<div class="right">
  <p object_id="1">Cras justo odio</p>
  <p object_id="2">Dapibus ac facilisis in</p>
  <p object_id="3">Porta ac consectetur ac</p>
  <p object_id="4">Vestibulum at eros</p>
  <p object_id="5">Cras justo odio</p>
  <p object_id="6">Dapibus ac facilisis in</p>
  <p object_id="7">Morbi leo risus</p>
  <p object_id="8">Porta ac consectetur ac</p>
  <p object_id="9">Vestibulum at eros</p>
  <p object_id="10">Vestibulum at eros</p>
</div>
</div>

Answer 2

我想你要做的是滚动右边的部分。我给你的代码留下了微小的变化，这样你就可以理解出了什么问题。该代码现在动画$(".right")，它现在在each函数之外。按照你的方式，它实际上是动画10次，每次一段。我改变的最后一件事是将{}添加到if声明中。我留下动画偏移量让你弄明白

$(document).ready(function() {
  var left = $('ul.list-group > li');
  var right = $('.right > p');

  left.each(function() {
     var left_id = $(this).attr('object_id');
     $(this).on('click', function() {
       right.each(function(){
         if(left_id == $(this).attr('object_id')) {
           $(this).css({"border":"1px solid red"});
         }
       });
       $('.right').animate({
         scrollTop: $(this).offset().top
       }, 2000);
      });
    });
  });