重新加載jQuery后滾動位置

Question

通過ajax進行數據滾動后，滾動充電時我有一個小問題，我一步一步顯示..

s

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

此Java的工作是收集一個selectbox的變量，並制作一個ajax語句來收集數據並顯示在表中

同時創建一個按鈕，該按鈕會打開一個帶有Posivilidad的模式窗口以修改信息。

威羅

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

關閉窗口會重新加載信息以顯示所做的更改...

問題是，當信息重新充電時，滾動條將滾動到頂部，

如果您排在最后一排，回到您住的地方會很麻煩...

Answer 1

最后你可以做一個小周期

var y = $(document).scrollTop();

y是確定滾動位置的變量，將其放置在js中...

$(document).scrollTop(y);

然后重新加載表格后，放置導致向下滾動到上一個位置的語句