recuperar posicao da barra de rolagem ao dar refresh

Rafael Ferreira_163968 · Fevereiro 11, 2014

Boa tarde, estou no final de um projeto, e com um problema que o cliente pediu pra incluir, e há duas semanas que não consigo evoluir nada na solicitacao dele. se alguem puder me ajudar.

detalhe do projeto:
o fotografo faz o upload de aproximadamente 3mil fotos para um album e o cliente acessando a area do cliente visualiza essas 3 mil fotos para escolher quais vai querer.

as fotos do album sao exibidas por um foreach, com o codigo abaixo:

<?php
$readGb = read('galeria',"WHERE post_id = '$postid'");

///////////////////////////// lê os dados da galeria de acordo com a id do album ////////////////////////////////////
if(!$readGb){
}else{
echo '<ul class="gblist">';
foreach($readGb as $gb):
$i++;
?>

<li>
<?php
$verificaGb = read('pedidos',"WHERE id_foto ='$gb[id]'");

////////////////////////// verifica se existe a foto gravada na tabela pedido, se nao existir exibe um link para poder "compa-la", se existir a foto o link nao é exibido //////////////////////////////////////////////////////////////////
if(!isset($verificaGb)){
?>
<a class="btn" href="index2.php?exe=album/gallery-cliente&postid=<?php echo $gb['post_id'];?>&foto=<?php echo $gb['id'];?>" />Foto Álbum</a>

/////////////////// ao clicar no link, é passado para a url o id do album + o id da foto //////////////////////////////////
<?php
}
?>

///////////////// o codigo abaixo exibe a thumb e a imagem para o cliente ///////////////////////////////////////////////////
<img src="../tim.php?src=../uploads/<?php echo $gb['img'];?>&w=85&h=65&q=100&zc=1" width="147" height="109" />
<div class="action">
<a href="../uploads/<?php echo $gb['img']; ?>" rel="shadowbox" title="<?php echo $gb['img_nome'];?>"><img src="ico/view.png" title="<?php echo $gb['img_nome'];?>" alt="<?php echo $gb['img_nome'];?>" /></a>

</div>
</li>
<?php
endforeach;
echo '</ul>';
}
?>

O que acontece, como é apenas uma div, o foreach exibe as 3mil fotos, a pagina fica imensa, o cliente vai rolando para baixo, e clica em uma determinada foto pra escolher, nisso a pagina da um refresh e volta para o topo, gostaria de saber se tem como ao cliente clicar no link, ele nao voltasse para cima, lembrando que é apenas uma div, no caso uma ancora o levaria ao final da pagina e ficaria na mesma.

detalhes adcionais:

é passado a id do album e id da foto, nisso meu codigo pega varios parametros como nome da imagem e outros atributos para gravar em outra tabela, tentei fazer como carrinho de compras, crianda um array, mas nao consegui fazer ele pegar todos os outros campos e gravar, e no caso de um array, ele teria que fazer um loop pelo pedido até finalizar.

Lucas Guima · Fevereiro 11, 2014

[...] no caso uma ancora o levaria ao final da pagina e ficaria na mesma.

Só se você colocasse a âncora no final da página...

Rafael Ferreira_163968 · Fevereiro 11, 2014

Só se você colocasse a âncora no final da página...

entao, tipo como todos dizem, é meu primeiro projeto, a div que eu uso pra exibir a galeria é só uma, enquanto tem imagem no banco ele vai listando, como eu faria pra barra de rolagem voltar pro lugar exato que ela tava? a ancora iria fazer ela voltar?

aqui no imasters eu notei que tem isso, ao dar um f5 na pagina, ela recarregou e a barra de rolagem voltou para a posição que estava antes.

Gabriel Heming · Fevereiro 11, 2014

JavaScript get window X/Y position for scroll

Pode usar o que há no link acima. Entretanto, todavia e contudo, eu indicaria alterar a forma que a imagem está sendo inserida no "carrinho" para uma forma assíncrona (ajax), assim, além de evitar o scroll, evita o refresh da página e a demora de carregar todas as fotos novamente.

Essa propriedade de manter o scroll ao apertar F5 é feita pelo navegador, e não no html/php/javascript.

Existem dois tipos de refresh:

- F5 (utiliza cache);

- CTRL + F5 (não utiliza cache).

Utilizando o cache, o navegador mantem a janela no exato ponto aonde o usuário estava "ancorado" na página. Já no outro refresh, nada é armazenado.

Rafael Ferreira_163968 · Fevereiro 11, 2014

JavaScript get window X/Y position for scroll

Pode usar o que há no link acima. Entretanto, todavia e contudo, eu indicaria alterar a forma que a imagem está sendo inserida no "carrinho" para uma forma assíncrona (ajax), assim, além de evitar o scroll, evita o refresh da página e a demora de carregar todas as fotos novamente.

Essa propriedade de manter o scroll ao apertar F5 é feita pelo navegador, e não no html/php/javascript.

Existem dois tipos de refresh:

- F5 (utiliza cache);

- CTRL + F5 (não utiliza cache).

Utilizando o cache, o navegador mantem a janela no exato ponto aonde o usuário estava "ancorado" na página. Já no outro refresh, nada é armazenado.

Gabriel Heming, obrigado pela ajuda, vou testar e retorno com o resultado.

Lucas Guima · Fevereiro 12, 2014

como eu faria pra barra de rolagem voltar pro lugar exato que ela tava? a ancora iria fazer ela voltar?

Sim, observe que no iMaster ele faz isso quando tem um #entryX na URL. Isto é uma âncora.

Utilizando o cache, o navegador mantem a janela no exato ponto aonde o usuário estava "ancorado" na página. Já no outro refresh, nada é armazenado.

Acabei de testar o Ctrl + F5 no Chrome e voltou ao mesmo lugar.

Gabriel Heming · Fevereiro 12, 2014

Você testou uma URL com a âncora, faça o teste sem a âncora. É uma propriedade do navegador.

------

Adendo: isso pode variar de navegador (CTRL + F5).

- Opera (meu navegador principal), está salvando;

- Firerox, não salva no refresh sem cache;

- Internet Explorer, salva;

- Safari, não tem esse modo de refresh;

- Chrome, nem abre essa bosta...

Rafael Ferreira_163968 · Fevereiro 12, 2014

infelizmente nao consegui posicionar o scroll conforme o eixo x e y, o jeito é apelar para as soluções provisorias, usei a paginação para exibir um limite de fotos na div, por exemplo, a tela suporta 30 imagens, o restante será carregado nas proximas paginas, o refresh nao vai sair do lugar.

Snowden · Fevereiro 12, 2014

jQuery

var posicao = $(document).scrollTop(); // OBTÉM A POSIÇÃO DO SCROLL

$.get('pagina.php?scroll='+posicao, function(data){

	location.reload(); // ATUALIZA A PÁGINA

	$(document).scrollTop(posicao); // POSICIONA O SCROLL DE ONDE PAROU

});

Lucas Guima · Fevereiro 12, 2014

Você testou uma URL com a âncora, faça o teste sem a âncora. É uma propriedade do navegador.

Negativo, me atentei a isso. E concluindo então, não dá pra depender do navegador sobre isso.

jQuery

Acho que estamos complicando uma coisa simples. Âncoras resolvem.

Snowden · Fevereiro 12, 2014

Acho que estamos complicando uma coisa simples. Âncoras resolvem.

cabe o autor do post decidir.

é só mais uma opção man, relax :thumbsup:

Rafael Ferreira_163968 · Fevereiro 12, 2014

jQuery

var posicao = $(document).scrollTop(); // OBTÉM A POSIÇÃO DO SCROLL

$.get('pagina.php?scroll='+posicao, function(data){

	location.reload(); // ATUALIZA A PÁGINA

	$(document).scrollTop(posicao); // POSICIONA O SCROLL DE ONDE PAROU

});

Hugo, desculpe minha ignorância, como utilizo o codigo acima? inseri o mesmo na minha jqruey, substitui a pagina.php? pela minha url, mas nao obtive sucesso,

se ajudar minha url é assim: index2.php?exe=album/gallery-cliente&postid=id_do_album

onde o postid= é uma variavel passada pela url, de acordo com id do album do cliente

Snowden · Fevereiro 12, 2014

o código abaixo é da página index2.php ?

<?php 
$readGb = read('galeria',"WHERE post_id = '$postid'");  
///////////////////////////// lê os dados da galeria de acordo com a id do album ///////////////////////
if(!$readGb){
}else{
echo '<ul class="gblist">';
foreach($readGb as $gb):
$i++;
?>
<li>
<?php
$verificaGb = read('pedidos',"WHERE id_foto ='$gb[id]'");
////////////////////////// verifica se existe a foto gravada na tabela pedido, se nao existir exibe um link para poder "compa-la", se existir a foto o link nao é exibido //////////////////////
if(!isset($verificaGb)){
?>
<a class="btn" href="index2.php?exe=album/gallery-cliente&postid=<?php echo $gb['post_id'];?>&foto=<?php echo $gb['id'];?>"  />Foto Álbum</a>
////////////// ao clicar no link, é passado para a url o id do album + o id da foto ///////////////
<?php 
}
?>
///////////////// o codigo abaixo exibe a thumb e a imagem para o cliente //////////////
<span><img src="../tim.php?src=../uploads/<?php echo $gb['img'];?>&w=85&h=65&q=100&zc=1" width="147" height="109" /></span>
<div class="action">
<a href="../uploads/<?php echo $gb['img']; ?>" rel="shadowbox" title="<?php echo $gb['img_nome'];?>"><img src="ico/view.png" title="<?php echo $gb['img_nome'];?>" alt="<?php echo $gb['img_nome'];?>" /></a>
</div><!-- /action -->
</li>
<?php 
endforeach;
echo '</ul>';
}
?>

Rafael Ferreira_163968 · Fevereiro 12, 2014

o código abaixo é da página index2.php ?

<?php 
$readGb = read('galeria',"WHERE post_id = '$postid'");  
///////////////////////////// lê os dados da galeria de acordo com a id do album ///////////////////////
if(!$readGb){
}else{
echo '<ul class="gblist">';
foreach($readGb as $gb):
$i++;
?>
<li>
<?php
$verificaGb = read('pedidos',"WHERE id_foto ='$gb[id]'");
////////////////////////// verifica se existe a foto gravada na tabela pedido, se nao existir exibe um link para poder "compa-la", se existir a foto o link nao é exibido //////////////////////
if(!isset($verificaGb)){
?>
<a class="btn" href="index2.php?exe=album/gallery-cliente&postid=<?php echo $gb['post_id'];?>&foto=<?php echo $gb['id'];?>"  />Foto Álbum</a>
////////////// ao clicar no link, é passado para a url o id do album + o id da foto ///////////////
<?php 
}
?>
///////////////// o codigo abaixo exibe a thumb e a imagem para o cliente //////////////
<span><img src="../tim.php?src=../uploads/<?php echo $gb['img'];?>&w=85&h=65&q=100&zc=1" width="147" height="109" /></span>
<div class="action">
<a href="../uploads/<?php echo $gb['img']; ?>" rel="shadowbox" title="<?php echo $gb['img_nome'];?>"><img src="ico/view.png" title="<?php echo $gb['img_nome'];?>" alt="<?php echo $gb['img_nome'];?>" /></a>
</div><!-- /action -->
</li>
<?php 
endforeach;
echo '</ul>';
}
?>

esse codigo é da pagina gallery-cliente,segue abaixo minha index2:

<?php
ini_set("display_errors", "0");
ob_start(); session_start();
require('../dts/dbaSis.php');
require('../dts/getSis.php');
require('../dts/setSis.php');
require('../dts/outSis.php');

if(!$_SESSION['autUser']){
	header('Location: index.php');
}else{
	$userid = $_SESSION['autUser']['id'];
	$readAutUser = read('up_users',"WHERE id = '$userid'");
	if($readAutUser){
		foreach($readAutUser as $autUser);
			if($autUser['nivel'] < '1' || $auUser['nivel'] > '2'){
				header('Location: '.BASE.'/pagina/perfil');
			}elseif($_SESSION){
				$status = $_SESSION['autUser']['status'];
				$readStatus = read('up_users',"WHERE status = '1'");
				if($readStatus){
					foreach($readStatus as $autStatus);
					if($autStatus['status'] == '0'){
						header('Location: index.php');
					}
				}
			}
		}else{
				header('Location: index.php');
		}
	
}
//echo '<pre class="debug">';
//print_r ($_SESSION);
//echo '</pre>';
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Painel Administrativo - Virgilius da Costa</title>

<meta name="title" content="Painel Administrativo - Virgilius da Costa" />
<meta name="description" content="Área restrita aos administradores" />
<meta name="keywords" content="Login, Recuperar Senha, Virgilius da Costa" />

<meta name="author" content="Rafael Ferreira" />   
<meta name="url" content="http://localhost/projeto" />
   
<meta name="language" content="pt-br" /> 
<meta name="robots" content="NOINDEX,NOFOLLOW" /> 

<link rel="icon" type="image/png" href="ico/chave.png" />
<link rel="stylesheet" type="text/css" href="css/painel.css" />
<link rel="stylesheet" type="text/css" href="css/geral.css" />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/upd.js'></script>


</head>
<body>


<div id="painel">
	<?php require_once('includes/header.php'); ?>
    
    <div id="content">
    	<?php require_once('includes/menu.php'); ?>
    	<div class="pg">
    	
        
        	<?php 
				if(empty($_GET['exe'])){
					require('home.php');
				}elseif(file_exists($_GET['exe'].'.php')){
					require($_GET['exe'].'.php');
				}else{
					echo '<div class="bloco"><span class="ms in"> Desculpe, esta página nao existe!</span></div>';
				}
			?>
    <!-- conteudo do site aqui-->   
    	</div><!-- fechou pg --> 	
    </div><!-- /content -->
    
<div style="clear:both"></div> 
<div id="footer">
	Desenvolvido por <a href="#" title="Sistema desenvolvido por Rafael Ferreira">Rafael Ferreira</a>
</div> <!-- fecha footer -->  
</div><!-- //painel -->
</body>
	<?php 
		require_once('../js/jscSis.php');
		require_once('js/jsc.php');
	ob_end_flush();
	?>
</html>

Lucas Guima · Fevereiro 12, 2014

Como você mesmo citou, observe o iMaster:

Página normal:

http://forum.imasters.com.br/topic/516335-recuperar-posicao-da-barra-de-rolagem-ao-dar-refresh/

Página apontando uma âncora:
http://forum.imasters.com.br/topic/516335-recuperar-posicao-da-barra-de-rolagem-ao-dar-refresh/#entry2051026

Para isso você só precisa da tag <a> com o atributo id indicando as âncoras. E da mesma tag com o atributo href indicando os links pelos quais as âncoras serão acessadas.

Execute o código abaixo, clicando e observando a URL, terá o mesmo efeito aqui do fórum:

<html>
<body>
	<p>
		<h3>
			<!-- Âncora <-> Link -->
			<a id="post1">Post</a> <a href="#post1">#1</a>
		</h3>
	</p>
	
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

	<p>
		<h3>
			<!-- Âncora <-> Link -->
			<a id="post2">Post</a> <a href="#post2">#2</a>
		</h3>
	</p>

	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

	<p>
		<h3>
			<!-- Âncora <-> Link -->
			<a id="post3">Post</a> <a href="#post3">#3</a>
		</h3>
	</p>

	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

	<p>
		<h3>
			<!-- Âncora <-> Link -->
			<a id="post4">Post</a> <a href="#post4">#4</a>
		</h3>
	</p>
</body>
</html>

Rafael Ferreira_163968 · Fevereiro 12, 2014

Como você mesmo citou, observe o iMaster:

Página normal:

http://forum.imasters.com.br/topic/516335-recuperar-posicao-da-barra-de-rolagem-ao-dar-refresh/

Página apontando uma âncora:

http://forum.imasters.com.br/topic/516335-recuperar-posicao-da-barra-de-rolagem-ao-dar-refresh/#entry2051026

Para isso você só precisa da tag <a> com o atributo id indicando as âncoras. E da mesma tag com o atributo href indicando os links pelos quais as âncoras serão acessadas.

Execute o código abaixo, clicando e observando a URL, terá o mesmo efeito aqui do fórum:
<html>
<body>
	
		<h3>
			
			<a id="post1">Post</a> <a href="#post1">#1</a>
		</h3>
	
	
	 

	
		<h3>
			
			<a id="post2">Post</a> <a href="#post2">#2</a>
		</h3>
	

	 

	
		<h3>
			
			<a id="post3">Post</a> <a href="#post3">#3</a>
		</h3>
	

	 

	
		<h3>
			
			<a id="post4">Post</a> <a href="#post4">#4</a>
		</h3>
	
</body>
</html>

Compreendo, a questao é que eu tenho apenas 1 link

<a class="btn" href="index2.php?exe=album/gallery-cliente&postid=<?php echo $gb['post_id'];?>&foto=<?php echo $gb['id'];?>"

/>Foto Álbum</a>

como as fotos sao apresentadas por um foreach, ele faz um loop e mostra todas as fotos, cada foto aparece um botaozinho nela com esse link em cima, o que diferencia é que no final do link ele mostra o id da foto : &foto=<?php echo $gb['id'];?>

ou seja, si eu ancorar o link, quando eu clicar nele, ele vai fazer o refresh e vai voltar pra primeira foto

Snowden · Fevereiro 12, 2014

Ta.. então ao clicar no link

<a class="btn" href="index2.php?exe=album/gallery-cliente&postid=<?php echo $gb['post_id'];?>&foto=<?php echo $gb['id'];?>"  />Foto Álbum</a>

os dados serão processados na página gallery-cliente.php que logo em seguida redirecionado de volta a index2.php ?

utilizado jquery você poderia envia os dados sem sair da página.

onde ta location.reload(); para atualizar. pode ser substituída por $(campo).html( data ); afim de atualizar um determinado campo sem atualizar toda a página (opcional).

<script>
$(document).ready(function(){

$('.action').click(function(){
	var posicao = $(document).scrollTop(), // OBTÉM A POSIÇÃO DO SCROLL
		url = $(this).attr('href'); // PEGA O LINK

$.get(url, function(data){ // ENVIA OS DADOS
	location.reload(); // ATUALIZA A PÁGINA 
	$(document).scrollTop(posicao); // POSICIONA O SCROLL DE ONDE PAROU
});
	return false;
});

});
</script>

no link do action, eu inclui a class outra chamada action

<a class="btn action" href="index2.php?exe=album/gallery-cliente&postid=<?php echo $gb['post_id'];?>&foto=<?php echo $gb['id'];?>"  />Foto Álbum</a>

no seu HEAD incluir a biblioteca do jquery

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Rafael Ferreira_163968 · Fevereiro 12, 2014

Ta.. então ao clicar no link
<a class="btn" href="index2.php?exe=album/gallery-cliente&postid=<?php echo $gb['post_id'];?>&foto=<?php echo $gb['id'];?>" />Foto Álbum</a>
os dados serão processados na página gallery-cliente.php que logo em seguida redirecionado de volta a index2.php ?

utilizado jquery você poderia envia os dados sem sair da página.

onde ta location.reload(); para atualizar. pode ser substituída por $(campo).html( data ); afim de atualizar um determinado campo sem atualizar toda a página (opcional).
<script>
$(document).ready(function(){

$('.action').click(function(){
	var posicao = $(document).scrollTop(), // OBTÉM A POSIÇÃO DO SCROLL
		url = $(this).attr('href'); // PEGA O LINK

$.get(url, function(data){ // ENVIA OS DADOS
	location.reload(); // ATUALIZA A PÁGINA 
	$(document).scrollTop(posicao); // POSICIONA O SCROLL DE ONDE PAROU
});
	return false;
});

});
</script>
no link do action, eu inclui a class outra chamada action
<a class="btn action" href="index2.php?exe=album/gallery-cliente&postid=<?php echo $gb['post_id'];?>&foto=<?php echo $gb['id'];?>" />Foto Álbum</a>
no seu HEAD incluir a biblioteca do jquery
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

|o| Hugo Sóstenes, simplismente resolvido, nao sei nem como agradecer, show de bola

Arquivado

recuperar posicao da barra de rolagem ao dar refresh

Recommended Posts

Rafael Ferreira_163968 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Ferreira_163968 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gabriel Heming 766

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Ferreira_163968 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gabriel Heming 766

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Ferreira_163968 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Ferreira_163968 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Ferreira_163968 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Ferreira_163968 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Snowden 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Ferreira_163968 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

Fóruns

Tempo Real