Como Mantener el Scroll despues de un PostBack ASP.net ( As Maintain Scroll after a PostBack ASP.net )
Saludos amig@s,
Cuando trabajamos con ASP.net nos hemos dado cuenta que si tenemos una pagina muy extensa Horizontalmente y damos click en un boton que esta muy abajo de la página esto generará un PostBack, en termino simples "Refrescará la pagina" y nos llevará al Inicio de la Pagina, lo cual es incomodo porque nuevamente tendrémos que deslizar el Scroll de la pagina hacia abajo.
OPCION 1:
Agreguen la linea de codigo que se encuentra resaltada, indicandole que mantenga la posicion del Scroll en el PostBack
El Codigo Anterior tambien podemos hacerlo en codigo c#, y tendíamos que hacerlo en el evento LOAD.
OPCION 1:
Agreguen la linea de codigo que se encuentra resaltada, indicandole que mantenga la posicion del Scroll en el PostBack
|
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
|
El Codigo Anterior tambien podemos hacerlo en codigo c#, y tendíamos que hacerlo en el evento LOAD.
|
{
protected void Page_Load(object sender, EventArgs e)
{
this.MaintainScrollPositionOnPostBack
= true;
}
}
|
OPCION 2:
Si por alguna razon ninguna de las opciones anteriores les funciono, aveces por temas del navegador pueden usar el siguiente codigo en java script que practicamente es la misma funcionalidad.
|
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title></title>
<script>
window.onload
= function () {
var scrollY =
parseInt('<%=Request.Form["scrollY"] %>');
if (!isNaN(scrollY))
{
window.scrollTo(0,
scrollY);
}
};
window.onscroll = function () {
var scrollY =
document.body.scrollTop;
if (scrollY ==
0) {
if
(window.pageYOffset) {
scrollY =
window.pageYOffset;
}
else {
scrollY =
(document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
}
if (scrollY
> 0) {
var input =
document.getElementById("scrollY");
if (input == null) {
input =
document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("id", "scrollY");
input.setAttribute("name", "scrollY");
document.forms[0].appendChild(input);
}
input.value = scrollY;
}
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
|
Cabe recalcar que esto funciona solo cuando la pagina hace PostBack, si estamos usando Ajax, o Update Panel la pagina no refrescará por ende nuestro Scroll se mantendrá en su posicion ;-).
Espero les sirva este post y publiquen sus comentarios y como les fue.
Saludos.
Muchisimas gracias!!! Era justo lo que necesitaba. Pero tengo un inquietud, si el valor que retorna window.pageYOffset siempre es Undefined, porque solamente no se coloca scrollY = 0 ?, Disculpa mi ignarancia pero soy principiante en este tema y ps solo dudas me nacen.. jejeje
ReplyDeleteGracias! Estuve probando otras opciones y nada... La Opción 2 es lo que necesitaba: simple y funcional
ReplyDelete