Mantener posición de scroll despues de una petición asincrona

Citar

Escrito el 02 Jul 2014 09:22 pm

Hola.
Tengo un menú desplegable en un lado de la página principal, al dar a algún enlace del menú hace una petición ajax y modifica un div de la página principal.

El problema es que el menú desplegable es muy largo, y al recibir la petición ajax me vuelve al principio del menú, pierdo la posición vertical de la pagina o sea, pierdo la posición del scroll y se hace muy engorroso volver a posicionarse donde estaba, además no me gusta nada es muy poco navegable.
Uso php y en internet he visto soluciones para asp y net.
Pongo la pregunta en el foro de JS porque creo que la solución seria pedir en JS la posición del scroll antes de la petición ajax y.... no sé mucho mas estoy un poco perdido, si alguien me da alguna solución, algún enlace o simplemente una pista se lo agradecería.

Saludos.
Sont

Por Sont

16 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 02 Jul 2014 09:40 pm

Sin un ejemplo no podemos ayudarte. puedes colocar un demo de tu trabajo en JSFiddle .net

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

FullStack Web Developer

@elporfirio

Citar

Escrito el 03 Jul 2014 01:17 pm

elporfirio escribió:

Sin un ejemplo no podemos ayudarte. puedes colocar un demo de tu trabajo en JSFiddle .net

Si tienes razón, mejor un ejemplo que mil palabras.
he dejado un ejemplo en: [url=elev3n.com/demo][/url]
El problema es cuando se clicka el "enlace 40", que en el retorno de ajax pierdo la posición del scroll.
y simplificando el codigo es muy sencillito:
index.php:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function cargar(a, b, c){
$.ajax({
type: "POST",
url:a,
data:{variable: c},
success: function(datos){
$(b).html(datos);
}
});
}
</script>
</head>
<body>
<div id="menu" style="float: left;>
<dl><dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 1 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 2 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 3 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 4 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 5 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 6 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 7 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 8 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 9 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 10 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 11 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 12 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 13 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 14 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 15 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 16 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 17 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 18 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 19 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 20 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 21 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 22 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 23 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 24 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 25 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 26 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 27 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 28 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 29 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 30 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 31 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 32 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 33 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 34 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 35 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 36 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 37 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 38 verde</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'rojo'); "> enlace 39 rojo</a></dt>
<dt> <a href='#' onclick="cargar('apoyo.php' , '#tabla', 'verde'); "> enlace 40 verde</a></dt></dl></div>
<div id="tabla"></div>

y apoyo.php:
$tabla=$_POST['variable'];
echo $tabla;

Por Sont

16 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 03 Jul 2014 03:07 pm

el link tiene #, al ser un link ancla, refresca la página

Código Javascript :

$('a[href="#"]').click(function(e){
  e.preventDefault();
  return false;
});

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado

Web Developer

Citar

Escrito el 03 Jul 2014 04:18 pm

para especificar lo qeu dice nasho, aplica esta;

Código HTML :

<a href='#' onclick="return cargar('apoyo.php' , '#tabla', 'verde');" >

y en tu funcion cargar al final un return false

Código Javascript :

function cargar(a, b, c){
    $.ajax({
        type: "POST",
        url:a,
        data:{variable: c},
            success: function(datos){
            $(b).html(datos);
         }
    });
    return false; //Esta hace la magia
}

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

FullStack Web Developer

@elporfirio

Citar

Escrito el 03 Jul 2014 05:05 pm

Muchas gracias!.. a los dos, me ha sido de gran ayuda, ya no sabia que hacer.

Por Sont

16 de clabLevel

Envíale un mensaje privado

Mantener posición de scroll despues de una petición asincrona

Escribe una respuesta rapida