Question

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

＆＃13;

$(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);

    });
  });
});
});

＆＃13;

.wrap {
  display: flex;
}

.right {
  overflow: scroll;
  height: 200px;
}

＆＃13;

<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>

＆＃13;

Answer 1

第一名：当您的animate()元素有自动保证金时，很难控制p

第二名：您需要遍历所有.right > p元素才能获得offset().top之前没有点击事件实际上我不知道为什么偏移每次点击运行

时更改点击事件

第三次最好使用.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);
      });
    });
  });

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

2 个答案: