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
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()
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()
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.
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
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 função.
Tais funções destacam-se também por rodar nos browsers mais usados atualmente.
