0

Tengo un linkbutton con un evento onClick que hace algo en code behind, pero me gustaria que cuando vuelva de ejecutar el evento on click, hubiese un javascript que moviera el scroll hasta un div en particular.

No tengo mucha idea de js, estuve investigandolo por mi cuenta las ultimas 24hrs pero no doy en el clavo.

Alguna idea?

Gracias.

Edit: Hola gracias por contestar, añado un codigo de ejemplo:

HTML:

<html><head></head>
<body>
<asp:LinkButton ID="lb1" runat="server" OnClick="lb1_Click"> Click Aqui </asp:LinkButton>

<!--Aqui imaginemos que hay una imagen que es muy grande, y mucho mas abajo mi div-->

<div id=miDiv> Hola </div>

</body>
</html>

Code Behind:

protected void lb1_Click(object sender, EventArgs e)
{
     //aqui hago algunas cosas, lleno un repeater, y otras cosas
     //y quiero que luego de ejecutar este codigo, el html scrolée
    //hasta el div de id=miDiv

}
1

1 respuesta 1

0

Edit: Perdona, había escrito antes de leer tu edición... no sé dónde tendrías que poner el código js/jquery, pero seguro que te pueden ayudar por aquí... aun así dejo la respuesta por si pueda ser util.

Te puedo dar una solución si usas jQuery. El método que buscas es scrollTop(). Dentro del paréntesis va el número de píxeles que hay desde el inicio del documento hasta donde se posicionará el scroll.

En tu caso debes usar el método offset().top para que te devuelva este número de pixeles desde el div en particular. (El método offset() devuelve un objeto con propiedades top y left, al poner ".top" detrás obtenemos el valor de esta propiedad en particular)

Por ejemplo:

$(document).scrollTop($('#idDelDivEnParticular').offset().top);

Esta línea te posicionará en el div en cuestión instantaneamente, si quieres en cambio que haga una transición progresiva puedes usar el metodo animate()con la propiedad scrollTop, por ejemplo así:

$('html').animate({scrollTop: $('#idDelDivEnParticular').offset().top}[,'slow'][,'linear']);

Los corchetes los pongo para indicar que es opcional, pero si lo pones obviamente no usas los corchetes. Donde pone "'slow'" puedes usar un número en milisegundos, 'slow' equivale a 600 (0´6 segundos), 'fast' (200 ms), 4000 (4 segundos, etc. también hay una propiedad oculta para el tipo de movimiento que por defecto es 'swing' y puedes cambiar a 'linear', añadiéndolo detrás o cerrar el paréntesis después de la llave sin añadir nada y usar así los valores por defecto que son 400 y 'swing'. Por último también permite ejecutar una función tras la animación, escribiéndola al final o llamándola.

5
  • Jon, muchas gracias por contestar, estoy recien empezando con el tema del js/jquery, de hecho me vi mi primer tuto ayer, pero ya domino css y c# mas o menos. he visto ese codigo del scrollTop por ahi, el tema es que no sé donde lo tengo que pegar! ¿Va en el c#? ¿va en el html? ¿va justo despues del html del linkbutton? Gracias. el 23 sep. 2018 a las 15:38
  • Segun veo es codigo jquery, o sea que iria entre 2 <script> </script> en el final del html cierto? pero como "lo llamo" luego? es solo la declaracion esa, no? o es mismo la llamada el 23 sep. 2018 a las 15:41
  • muchas gracias igualmente:) el 23 sep. 2018 a las 15:42
  • Pues sinceramente no lo sé. Usando un archivo ".js" y especificando ahí el evento "click" tal vez funcione. Supongo que podrás llamar a una función de c# desde ahí, pero ni idea. Sé hacerlo con jquery + php (es decir ajax), pero no tengo ni idea de cómo se comunica con otros lenguajes... sorry, seguro que te lo aclaran pronto ;) el 23 sep. 2018 a las 15:48
  • Quiero ayudarte pero soy un poco novato, de hecho es mi primer día aquí. La idea es poner la etiqueta <script src="miscript.js"></script> dentro de la etiqueta <head>. Luego en el archivo jquery sería $(document).ready(iniciar); y abajo escribirías la funcion que he llamado "iniciar", donde escribirias $('#idDelBoton').click(function(){Aquí iria lo de mi primera respuesta}); Pero claro, no sé si puedes hacer eso y a la vez que haga el asunto de c# por otra parte desde la etiqueta asp. Supongo que sí, pero no lo puedo asegurar ... el 23 sep. 2018 a las 15:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.