2012-10-05 30 views
5

Estoy enviando algunos datos a mi base de datos y luego volviendo a cargar la misma página que estaba acabando el usuario. Me preguntaba si hay alguna manera de recordar la posición de desplazamiento que el usuario acaba de usar.cómo recordar la posición de desplazamiento de la página

+1

¿Qué tal las cookies? – VisioN

+0

almacene la posición de desplazamiento actual en una cookie, luego vuelva a utilizarla mientras carga la página –

Respuesta

15

me di cuenta de que me había perdido la parte importante de enviar, por lo tanto, decidí ajustar el código para almacenar la cookie en el evento de clic en lugar de la forma original de almacenarlo mientras se desplaza.


Aquí está una manera jQuery de hacerlo:

jsfiddle (Sólo tiene que añadir /show al final de la URL si quieres verla fuera de los marcos)

muy importante, Necesitaremos el jquery cookie plugin.

jQuery:

// When document is ready... 
$(document).ready(function() { 

    // If cookie is set, scroll to the position saved in the cookie. 
    if ($.cookie("scroll") !== null) { 
     $(document).scrollTop($.cookie("scroll")); 
    } 

    // When a button is clicked... 
    $('#submit').on("click", function() { 

     // Set a cookie that holds the scroll position. 
     $.cookie("scroll", $(document).scrollTop()); 

    }); 

}); 


Aquí todavía el código de la respuesta original:

jsfiddle

jQuery:

// When document is ready... 
$(document).ready(function() { 

    // If cookie is set, scroll to the position saved in the cookie. 
    if ($.cookie("scroll") !== null) { 
     $(document).scrollTop($.cookie("scroll")); 
    } 

    // When scrolling happens.... 
    $(window).on("scroll", function() { 

     // Set a cookie that holds the scroll position. 
     $.cookie("scroll", $(document).scrollTop()); 

    }); 

}); 

@ La respuesta de Cody me recordó algo importante.

Solo lo hice para verificar y desplazarme hacia la posición verticalmente.

+0

bam! eso funcionó perfectamente, solo agregué lo que tenía en mi código y funcionó al instante :) gracias muchísimo. – HurkNburkS

+0

Probablemente, dado que estoy en jQuery v1.5.1 (?), Tuve que usar esta variante para que funcione: $ (ventana) .scroll (function() {// set cookie}); – fiat

+0

@fiat Sí. El método '.on()' se agregó en jquery 1.7. – Joonas

0

Bueno, si utiliza _targets en su código, puede guardar eso.

O bien, puede hacer una solicitud de ajax para obtener window.height.

document.body.offsetHeight; 

luego dejar caer de nuevo, dar a la variable javascript y mover la página para ellos.

4

(1) Solución 1:

primer lugar, obtener la posición de desplazamiento de JavaScript al hacer clic en el botón de envío.

En segundo lugar, incluya este valor de posición de desplazamiento en los datos enviados a la página PHP.

En tercer lugar, el código PHP debe escribir de nuevo este valor en el HTML generado como una variable JS:

<script> 
var Scroll_Pos = <?php echo $Scroll_Pos; ?>; 
</script> 

En cuarto lugar, utilizar JS para desplazarse a la posición especificada por la variable JS 'Scroll_Pos'

(2) Solución 2:

Guarde la posición en cookie, luego use JS para desplazarse a la posición guardada cuando la página se recargó.

+1

bien, gracias ... va a tener que hacer un montón de investigación, entonces ... bastaría con un poco más de lo que esperaba. – HurkNburkS

3

Almacenar la posición en un campo oculto.

<form id="myform"> 
    <!--Bunch of inputs--> 
</form> 

que con jQuery almacenar el scrollTop y scrollLeft

$("form#myform").submit(function(){ 
    $(this).append("<input type='hidden' name='scrollTop' value='"+$(document).scrollTop()+"'>"); 

    $(this).append("<input type='hidden' name='scrollLeft' value='"+$(document).scrollLeft()+"'>"); 
}); 

que en la siguiente recarga hacer una redirección o imprimirlos con PHP

$(document).ready(function(){ 
    <?php 
     if(isset($_REQUEST["scrollTop"]) && isset($_REQUEST["scrollLeft"])) 
     echo "window.scrollTo(".$_REQUEST["scrollTop"].",".$_REQUEST["scrollLeft"].")"; 
    ?> 
}); 
Cuestiones relacionadas