重新加载jQuery后滚动位置
[英]Scroll position after reload Jquery
问题描述
I have a little problem with the scroll recharge after data via ajax, I step to show .. 
通过ajax进行数据滚动后，滚动充电时我有一个小问题，我一步一步显示..
Js
$('select#mes').on('change',function(){
var valor = $(this).val();
var route = "../../public/ADIC/ListaM";
var token = document.getElementById('token').getAttribute('content')
if(valor != null){
$.ajax({
url: route,
headers: {'X-CSRF-TOKEN': token},
type: 'POST',
dataType: 'json',
data:{mes: valor},
beforeSend: function () {
$("#resultado").html('<i class="fa fa-refresh fa-spin"></i>');
$('#limpiar tbody').empty();
},
success: function(data){
$("#resultado").html('');
var tbody = $('.table.table-striped > tbody');
$(data.users).each(function(index, user){
if(user.Check_J1 == 1 && user.Check_J2 == 1 ){
$('<tr class="success" />')
.append($('<td />').html(user.Fecha))
.append($('<td />').html(user.Cancha))
.append($('<td />').html(user.EquipoA +' vs '+ user.EquipoB + ' (' + user.Categoria +')' ))
.append($('<td />').html(user.Numero_J1 +' - '+ user.Nombre_J1 + ' ' + user.Apellido_J1 ))
.append($('<td />').html(user.Numero_J2 +' - '+ user.Nombre_J2 + ' ' + user.Apellido_J2 ))
.append($('<td />').html('<button class="btn register btn-skin-green btn-xs" data-store-code='+ user.id +' ><i class="fa fa-fw fa-eye"></i>Ver</button>'))
.appendTo(tbody);
}else{
$('<tr class="danger" />')
.append($('<td />').html(user.Fecha))
.append($('<td />').html(user.Cancha))
.append($('<td />').html(user.EquipoA +' vs '+ user.EquipoB + ' (' + user.Categoria +')' ))
.append($('<td />').html(user.Numero_J1 +' - '+ user.Nombre_J1 + ' ' + user.Apellido_J1 ))
.append($('<td />').html(user.Numero_J2 +' - '+ user.Nombre_J2 + ' ' + user.Apellido_J2 ))
.append($('<td />').html('<button class="btn register btn-skin-green btn-xs" data-store-code='+ user.id +' ><i class="fa fa-fw fa-eye"></i>Ver</button>'))
.appendTo(tbody);
}
});
$('.register').click(function() {
var storeCode = $(this).data('storeCode');
$("#capa_modal").show();
$("#capa_para_edicion").show();
var url = storeCode+"/edit";
$.get(url,function(resul){
$("#capa_para_edicion").html(resul);
});
});
},
error: function() {
}
});
}else{
}
});
This java what it does is collect the variable of a selectbox and makes an ajax statement to collect data and displaying in a table 此Java的工作是收集一个selectbox的变量，并制作一个ajax语句来收集数据并显示在表中
at the same time creates a button that opens a modal window with posivilidad to modify the information. 同时创建一个按钮，该按钮会打开一个带有Posivilidad的模式窗口以修改信息。
viwer
<div class="form-group">
<div class='row'>
<div class='col-md-1'></div>
<div class='col-md-10'>
@foreach($resp as $respuesta)
{!!Form::hidden('id',$respuesta->id, ['id'=>'id'])!!}
{!!Form::label('numero','Fecha: ')!!}
{!!$respuesta->Fecha!!}<br>
{!!Form::label('numero','Cancha: ')!!}
{!!$respuesta->Cancha!!}<br>
{!!Form::label('nombre','Partido: ')!!}
{!!$respuesta->EquipoA!!} vs {!!$respuesta->EquipoB!!}({!!$respuesta->Categoria!!})<br>
<div id="datos1">
{!!Form::label('nombre','Primer Juez: ')!!}
@if($respuesta->Check_J1 == '1')
{!!$respuesta->Numero_J1!!} - {!!$respuesta->Nombre_J1!!} {!!$respuesta->Apellido_J1!!} <span class="btn label label-success">ok</span>
<span id="show_1" class=" btn label label-warning">Editar</span></a><br>
@else
{!!$respuesta->Numero_J1!!} - {!!$respuesta->Nombre_J1!!} {!!$respuesta->Apellido_J1!!} <span class="btn label label-danger" >Error</span>
<span id="1_juez" class="btn label label-primary">
@foreach($Juez1 as $Juez1)
{!!$Juez1->numero1!!} - {!!$Juez1->nombre1!!} {!!$Juez1->apellido1!!}</span>
{!!Form::hidden('Numero_J1',$Juez1->numero1, ['id'=>'Numero_J1'])!!}
{!!Form::hidden('Nombre_J1',$Juez1->nombre1, ['id'=>'Nombre_J1'])!!}
{!!Form::hidden('Apellido_J1',$Juez1->apellido1, ['id'=>'Apellido_J1'])!!}
@endforeach
<span id="show_1" class=" btn label label-warning">Editar</span></a><br>
@endif
</div>
<div id=edit_1>
<div class='row'>
<div class='col-md-2'>
{!!Form::text('Numero_J1_e',$respuesta->Numero_J1, ['id'=>'Numero_J1_e','class'=>'form-control input-sm ', 'placeholder' => 'Numero'])!!}
</div>
<div class='col-md-3'>
{!!Form::text('Nombre_J1_e',$respuesta->Nombre_J1, ['id'=>'Nombre_J1_e','class'=>'form-control input-sm', 'placeholder' => 'Nombre'])!!}
</div>
<div class='col-md-5'>
{!!Form::text('Apellido_J1_e',$respuesta->Apellido_J1, ['id'=>'Apellido_J1_e','class'=>'form-control input-sm', 'placeholder' => 'Apellido'])!!}
</div>
<div class='col-md-2'>
<span id="1_juez_e" class=" btn label label-success">Confirmar</span></a>
</div>
</div>
</div>
<div id="datos2">
{!!Form::label('nombre','Segundo Juez: ')!!}
@if($respuesta->Check_J2 == '1')
{!!$respuesta->Numero_J2!!} - {!!$respuesta->Nombre_J2!!} {!!$respuesta->Apellido_J2!!} <span class="btn label label-success">ok</span>
<span id="show_2" class=" btn label label-warning">Editar</span></a><br><br>
@else
{!!$respuesta->Numero_J2!!} - {!!$respuesta->Nombre_J2!!} {!!$respuesta->Apellido_J2!!} <span class="btn label label-danger" >Error</span>
@foreach($Juez2 as $Juez2)
@if($Juez2->numero2 !='')
<span id="2_juez" class="btn label label-primary">
{!!$Juez2->numero2!!} - {!!$Juez2->nombre2!!} {!!$Juez2->apellido2!!}</span>
{!!Form::hidden('Numero_J2',$Juez2->numero2, ['id'=>'Numero_J2'])!!}
{!!Form::hidden('Nombre_J2',$Juez2->nombre2, ['id'=>'Nombre_J2'])!!}
{!!Form::hidden('Apellido_J2',$Juez2->apellido2, ['id'=>'Apellido_J2'])!!}
@else
No hay datos
@endif
@endforeach
<span id="show_2" class=" btn label label-warning">Editar</span></a><br>
@endif
</div>
<div id=edit_2>
<div class='row'>
<div class='col-md-2'>
{!!Form::text('Numero_J2_e',$respuesta->Numero_J2, ['id'=>'Numero_J2_e','class'=>'form-control input-sm ', 'placeholder' => 'Numero'])!!}
</div>
<div class='col-md-3'>
{!!Form::text('Nombre_J2_e',$respuesta->Nombre_J2, ['id'=>'Nombre_J2_e','class'=>'form-control input-sm', 'placeholder' => 'Nombre'])!!}
</div>
<div class='col-md-5'>
{!!Form::text('Apellido_J2_e',$respuesta->Apellido_J2, ['id'=>'Apellido_J2_e','class'=>'form-control input-sm', 'placeholder' => 'Apellido'])!!}
</div>
<div class='col-md-2'>
<span id="2_juez_e" class=" btn label label-success">Confirmar</span></a>
</div>
</div>
</div>
{!!Form::hidden('valor',$respuesta->Mes, ['id'=>'valor'])!!}
@endforeach
<a id="salir" class="label label-danger "><i class='fa fa-link'></i> <span>Volver</span></a>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#edit_1").hide();
$("#edit_2").hide();
$('#show_1').click(function(f) {
$("#edit_1").slideToggle();
});
$('#show_2').click(function(r) {
$("#edit_2").slideToggle();
});
$('#1_juez').click(function(e) {
var dato = $("#id").val();
var dato1 = $("#Numero_J1").val();
var dato2 = $("#Nombre_J1").val();
var dato3 = $("#Apellido_J1").val();
var route = "http://localhost/UJOBB/public/ADIC/edito1";
var token = document.getElementById('token').getAttribute('content')
$.ajax({
url: route,
headers: {'X-CSRF-TOKEN': token},
type: 'POST',
dataType: 'json',
data:{id: dato, Numero_J1: dato1, Nombre_J1: dato2, Apellido_J1: dato3},
beforeSend: function () {
$("#datos1").html('<i class="fa fa-refresh fa-spin"></i>');
},
success: function() {
$("#datos1").load(dato+"/edit" + " #datos1");
$("#edit_1").hide();
},
error: function() {
}
});
$("#edit_1").hide();
});
$('#2_juez').click(function(e) {
var dato = $("#id").val();
var dato1 = $("#Numero_J2").val();
var dato2 = $("#Nombre_J2").val();
var dato3 = $("#Apellido_J2").val();
var route = "http://localhost/UJOBB/public/ADIC/edito2";
var token = document.getElementById('token').getAttribute('content')
$.ajax({
url: route,
headers: {'X-CSRF-TOKEN': token},
type: 'POST',
dataType: 'json',
data:{id: dato, Numero_J2: dato1, Nombre_J2: dato2, Apellido_J2: dato3},
beforeSend: function () {
$("#datos2").html('<i class="fa fa-refresh fa-spin"></i>');
},
success: function() {
$("#datos2").load(dato+"/edit" + " #datos2");
$("#edit_2").hide();
},
error: function() {
}
});
$("#edit_2").hide();
});
$('#1_juez_e').click(function(e) {
var dato = $("#id").val();
var dato1 = $("#Numero_J1_e").val();
var dato2 = $("#Nombre_J1_e").val();
var dato3 = $("#Apellido_J1_e").val();
var route = "http://localhost/UJOBB/public/ADIC/edito1";
var token = document.getElementById('token').getAttribute('content')
$.ajax({
url: route,
headers: {'X-CSRF-TOKEN': token},
type: 'POST',
dataType: 'json',
data:{id: dato, Numero_J1: dato1, Nombre_J1: dato2, Apellido_J1: dato3},
beforeSend: function () {
$("#datos1").html('<i class="fa fa-refresh fa-spin"></i>');
},
success: function() {
$("#datos1").load(dato+"/edit" + " #datos1");
$("#edit_1").hide();
},
error: function() {
}
});
});
$('#2_juez_e').click(function(f) {
var dato = $("#id").val();
var dato1 = $("#Numero_J2_e").val();
var dato2 = $("#Nombre_J2_e").val();
var dato3 = $("#Apellido_J2_e").val();
var route = "http://localhost/UJOBB/public/ADIC/edito2";
var token = document.getElementById('token').getAttribute('content')
$.ajax({
url: route,
headers: {'X-CSRF-TOKEN': token},
type: 'POST',
dataType: 'json',
data:{id: dato, Numero_J2: dato1, Nombre_J2: dato2, Apellido_J2: dato3},
beforeSend: function () {
$("#datos2").html('<i class="fa fa-refresh fa-spin"></i>');
},
success: function() {
$("#datos2").load(dato+"/edit" + " #datos2");
$("#edit_2").hide();
},
error: function() {
}
});
});
$('#salir').click(function() {
//funcion para ocultar las capas modales
var valor = $("#valor").val();
$("#capa_modal").hide();
$("#capa_para_edicion").hide();
$("#capa_para_edicion").html("");
var route = "../../public/ADIC/ListaM";
var token = document.getElementById('token').getAttribute('content')
$.ajax({
url: route,
headers: {'X-CSRF-TOKEN': token},
type: 'POST',
dataType: 'json',
data:{mes: valor},
beforeSend: function () {
$("#resultado").html('<i class="fa fa-refresh fa-spin"></i>');
$('#limpiar tbody').empty();
},
success: function(data){
$("#resultado").html('');
var tbody = $('.table.table-striped > tbody');
$(data.users).each(function(index, user){
if(user.Check_J1 == 1 && user.Check_J2 == 1 ){
$('<tr class="success" />')
.append($('<td />').html(user.Fecha))
.append($('<td />').html(user.Cancha))
.append($('<td />').html(user.EquipoA +' vs '+ user.EquipoB + ' (' + user.Categoria +')' ))
.append($('<td />').html(user.Numero_J1 +' - '+ user.Nombre_J1 + ' ' + user.Apellido_J1 ))
.append($('<td />').html(user.Numero_J2 +' - '+ user.Nombre_J2 + ' ' + user.Apellido_J2 ))
.append($('<td />').html('<button class="btn register btn-skin-green btn-xs" data-store-code='+ user.id +' ><i class="fa fa-fw fa-eye"></i>Ver</button>'))
.appendTo(tbody);
}else{
$('<tr class="danger" />')
.append($('<td />').html(user.Fecha))
.append($('<td />').html(user.Cancha))
.append($('<td />').html(user.EquipoA +' vs '+ user.EquipoB + ' (' + user.Categoria +')' ))
.append($('<td />').html(user.Numero_J1 +' - '+ user.Nombre_J1 + ' ' + user.Apellido_J1 ))
.append($('<td />').html(user.Numero_J2 +' - '+ user.Nombre_J2 + ' ' + user.Apellido_J2 ))
.append($('<td />').html('<button class="btn register btn-skin-green btn-xs" data-store-code='+ user.id +' ><i class="fa fa-fw fa-eye"></i>Ver</button>'))
.appendTo(tbody);
}
});
$('.register').click(function() {
var storeCode = $(this).data('storeCode');
$("#capa_modal").show();
$("#capa_para_edicion").show();
var url = storeCode+"/edit";
$.get(url,function(resul){
$("#capa_para_edicion").html(resul);
});
});
},
})
});
});
</script>
to close the window reloads the information to show the changes that were made ... 关闭窗口会重新加载信息以显示所做的更改...
the problem is that when the information recharges the scroll up to the top, 问题是，当信息重新充电时，滚动条将滚动到顶部，
and if you're in the last row is very troublesome back down to where you stayed ... 如果您排在最后一排，回到您住的地方会很麻烦...
1 个解决方案
解决方案1
0 已采纳 2016-06-20 14:57:25
at the end you can do with a small cycle 最后你可以做一个小周期
var y = $(document).scrollTop();
y is the variable that determines the position of the scroll, place it in the js ... y是确定滚动位置的变量，将其放置在js中...
$(document).scrollTop(y);
and then after reloading the table, place the statement that causes the scroll down to the previous poscision 然后重新加载表格后，放置导致向下滚动到上一个位置的语句
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
重新加载后滚动到位置 - Scroll to position after reload
重新加载后将滚动位置保存在div中 - save scroll position inside div after reload
重载后Angular JS保留滚动位置 - Angular JS retain scroll position after reload
用ajax重新加载php文件后，保持div内滚动位置 - Keep scroll position inside div after reload php file with ajax
Asp.net-页面刷新或重新加载后保持滚动位置 - Asp.net - Keep Scroll Position after page refresh or reload
从弹出窗口返回后重新加载并记住滚动位置 - Reload and remember the scroll position after coming back from popup
mobileSafari：重新加载后自动滚动/平移到页面上的特定位置 - mobileSafari: Auto Scroll/Pan to specific position on page after reload
jQuery-窗口滚动后可拖动位置问题 - jQuery - draggable position issue after window scroll
DOM操作后保留滚动位置-jQuery - Retain scroll position after DOM Manipulation - jQuery
在重新加载和加载时滚动到相同的位置 - Scroll to same Position on reload and load
相关标签