滚动到记录的最后一次单击位置

Question

在下面的代码中，我有一个网格结构，当我点击 {{1}时，我试图获取/滚动到记录的最后点击的位置重置选择后按按钮。

任何建议都会有所帮助。

小提琴：https://jsfiddle.net/x3r3mt1t/6/

＆＃13;

＆＃13;

Scroll to last clicked position

＆＃13;

$(function(){
var elPos;
$('tr').on('click', function(){
  if(!$(this).hasClass('selected')){
		$('tr').not(this).removeClass('selected');
    $(this).addClass('selected');
  }
  elPos = Math.round($('.selected').position().top);
  $('p').html('Last clicked element pos: ' + elPos);
  $('p').hide();
});
$('#reset').on('click', function(){
	$('tr').removeClass('selected');
  $('p').show();
  $('div').scrollTop(0);
});
});

＆＃13;

div{
  width:500px;
  height:200px;
  overflow-y:auto;
}
table, td{
  border:1px solid #ccc;
}
.selected{
  color:#fff;
  background:#63aadc;
}
p{
  visibility:hidden;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

关键是使用强大的JQuery选择器index和scrollTop（更新的答案）：

HTML ：将最后一部分替换为：

<div id="container">
  <table border="1" style="width:100%;">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
    </tr>
  </table>
</div>
<br>
<p>Last clicked element pos: </p>
<span id="topScroll"></span>
<button id="reset">Reset</button>
<button id="lastclicked">Scroll to last clicked position</button>

JS：

$(function() {
  var elPos;
  $('tr').on('click', function() {
    if (!$(this).hasClass('selected')) {
      $('tr').not(this).removeClass('selected');
      $(this).addClass('selected');
    }
    elPos = Math.round($('.selected').position().top);
    $('p').html('Last clicked element pos: ' + elPos);
    $('p').hide();
  });
  $('#reset').on('click', function() {
    var position = 0;
    if ($('tr').hasClass('selected').toString() === 'true') {
      $('tr').removeClass('selected');
      $('p').show();
      position = $('div').scrollTop();
      $('#topScroll').text(position);
    }
    $('#container').animate({
      scrollTop: 0
    }, 'slow')

  });
  $('#lastclicked').on('click', function() {
    var position = $('#topScroll').text();
    if (position !== '') {
      $('div#container').animate({
        scrollTop: position
      }, 'slow')
    } else {
      $('div#container').animate({
        scrollTop: 0
      }, 'slow')
    }


  });
});

CSS：

div {
  width: 500px;
  height: 200px;
  overflow-y: auto;
}

table,
td {
  border: 1px solid #ccc;
}

.selected {
  color: #fff;
  background: #63aadc;
}

p {
  display: none;
}

#topScroll {
  display: none;
}