滚动到记录的最后一次单击位置(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; }
更多推荐
发布评论