POSICIONAR A BARRA DE ROLAGEM DO NAVEGADOR APÓS UM POSTBACK

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (4)  (0)

O próprio ASP.NET possui um recurso chamado MaintainScrollPositionOnPostback porém, em alguns casos este recurso também deixa algumas lacunas o que nos faz então partir para o que pra mim é o mais interessante; o código criado no braço. E é por esse motivo que nesse artigo irei apresentar uma solução fácil usando códigos em JavaScript e que funciona para os todos os navegadores que testei, sendo eles; Firefox, Internet Explorer, Google Chrome e Opera todos em suas versões atuais.

_______________________________________________________________________________



Valdir Silva¹

 

INTRODUÇÃO

Tenho recebido diversos e-mails questionando uma forma de posicionar a barra de rolagem dos navegadores após a realização de um postback, percebi também que em inúmeros fóruns de discuções sobre JavaScript e ASP.NET que a solução mais apresentada é colocar todos os elementos dentro de uma div já que este elemento cria uma barra de rolagem quando ocorre um overlow de conteúdo.

O próprio ASP.NET possui um recurso chamado MaintainScrollPositionOnPostback porém, em alguns casos este recurso também deixa algumas lacunas o que nos faz então partir para o que pra mim é o mais interessante; o código criado no braço. E é por esse motivo que nesse artigo irei apresentar uma solução fácil usando códigos em JavaScript e que funciona para os todos os navegadores que testei, sendo eles; Firefox, Internet Explorer, Google Chrome e Opera todos em suas versões atuais.

Palavras-chave: ASP.NET; Javascript; Posicionar Barra de rolagem; Postback.

 

Para darmos início ao desenvolvimento, vamos criar um novo projeto ASP.NET ou ainda você pode também adicionar uma pagina .aspx em seu projeto. Escolha umas das opções e na nova página do projeto exiba o código fonte Html pois, é nele que vamos adicionar as funções JavaScript.

Dentro da tag adicione as tags de script do JavaScript e aproveitando vamos adicionar também a nossa primeira function, acompanhe a figura 1.0

figura 1.0 – Tag Script e função scroll

_______________________________________________________________________________

figura 1.0 – Tag Script e função scroll


Como podemos ver a função scroll() é bem simples, ela se encarrega de guardar a posição da barra de rolagem sobre o menor movimento da mesma. Nesta função estamos recebendo os valores das barras horizontal e vertical porém, para este artigo estou gravando apenas a posição na vertical.


A próxima função que vamos adicionar entre a tag do Html será responsável por gravar o cookie com o valor atual da barra de rolagem, esta função é a gravaCookie() e tem seu codigo listado na figura 1.1.


Figura 1.1 – Função gravaCookie()

________________________________________________________________________

Figura 1.1 – Função gravaCookie()


A função gravaCookie() recebe um parâmetro enviado através da função scroll() e grava o valor deste parâmetro em um cookie . Este parâmetro é um inteiro indicando a exata posição da barra de rolagem vertical.

Nosso próximo passo é adicionar uma função para fazer a verificação do posicionamento da barra de rolagem no momento do reload da página, esta função eu chamei de reloadPage(). Vamos então ao código da mesma.

__________________________________________________________________________________

Figura 1.2 – Função reloadPage()

E para finalizar, precisamos apenas criar a função encarregada de ler o cookie e retornar o valor do parâmetro “PagePosition” caso este exista. Acompanhe a figura 1.3 para maiores detalhes.

Figura 1.3 – Função LerCookie()

_______________________________________________________________________________
Figura 1.3 – Função LerCookie()


Esta função assim como as outras dispensa muitos comentários. Ela recebe como parâmetro o nome do cookie e retorna o valor existente dentro do cookie gravado em PagePosition. Este valor é a última posição da barra de rolagem antes do postback.

Bem as funções necessárias para a execução correta do propósito deste artigo estão prontas vamos agora para o código HTML da página. Este é também muito simples, veja na figura 1.4.

Figura 1.4 – Código HTML da página aspx

_____________________________________________________________________________
Figura 1.4 – Código HTML da página aspx.

Adicione diversos parágrafos na sua página de modo que apareça a barra de rolagem vertical, em seguida posicione-a onde você desejar e clique no botão Postback.


Preste atenção também para a tag note que foi adicionado a ela o evento onload passando ao evento a função relaodPage(). Dessa forma toda vez que a página efetuar um postback a função reloadPage será executada posicionando assim a barra de rolagem. 


Veja na figura 1.5 o resultado final da minha página.

Figura 1.5 – Resultado final da pagina sendo executada no Firefox

________________________________________________________________
Figura 1.5 – Resultado final da pagina sendo executada no Firefox



CONCLUSÃO


Com este artigo pude demonstrar com algumas funções JavaScript, como resolver o problema de posicionamento da barra de rolagem após um postback, ressaltando que com essas funções realmente conseguimos manipular a posição da barra de rolagem vertical sem o uso de qualquer outro elemento como por exemplo uma <div>. Tais funções destacam-se também por rodar nos browsers mais usados atualmente.



__________________________________________________________________________________________________
¹ Profissional da área de informática à 14 anos atuando com treinamentos e projetos de web sites. Usuário das tecnologias .NET a 4 anos, atualmente atuando na área de TI na cidade de Novo Hamburgo-RS.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?