首页 > 编程入门 文章详情

滚动到记录的最后一次单击位置(Scroll to the last clicked position of the record)

编程入门 行业动态 更新时间:2024-10-28 11:24:02
滚动到记录的最后一次单击位置(Scroll to the last clicked position of the record)

在下面的代码中，我有一个网格结构，我在重置选择后Scroll to last clicked position按钮时，我试图获取/滚动到记录的Scroll to last clicked position 。

任何的意见都将会有帮助。

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

$(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);
});
}); 
  
div{
  width:500px;
  height:200px;
  overflow-y:auto;
}
table, td{
  border:1px solid #ccc;
}
.selected{
  color:#fff;
  background:#63aadc;
}
p{
  visibility:hidden;
} 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<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>
<button id="reset">Reset</button>
<button>Scroll to last clicked position</button> 
  
 

In the below code, I have a grid structure where I'm trying to get/scroll to the last clicked position of the record when clicked on the Scroll to last clicked position button after resetting the selection.
 

Any suggestions would be helpful.
 

Fiddle: https://jsfiddle.net/x3r3mt1t/6/
 

 
 
  
  
$(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);
});
}); 
  
div{
  width:500px;
  height:200px;
  overflow-y:auto;
}
table, td{
  border:1px solid #ccc;
}
.selected{
  color:#fff;
  background:#63aadc;
}
p{
  visibility:hidden;
} 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<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>
<button id="reset">Reset</button>
<button>Scroll to last clicked position</button> 
  
 


                
最满意答案

                
                    
                        
 关键是使用强大的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;
}

The Key is to use the powerful JQuery selector index and scrollTop (updated answer) :
 

HTML: Replace the last portion with:
 
<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;
}

更多推荐

本文发布于:2023-04-28 13:40:00，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/34/1332436.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：单击   位置   Scroll   record   position

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表