Jump to content
Biel.

memorizar posicao final do scroll ao carregar a pagina

Recommended Posts

Olá pessoal. Direto ao ponto. Nesta URL  gostaria que ao clicar em um link qualquer memorizasse a posição final do scroll ou seja impedisse scroll de voltar para topo . Segue abaixo o código que esta na URL

<style>
.lateral{width:160px; height:98%; overflow: auto; position:fixed; top:0; float:left;background:#C1C1C1;}
.direita{max-width:300px;  background-color:#EBEBEB; float:left; margin-left:200px; }
.b1{margin-top:500px; margin-bottom:500px; display:block;}	
</style>

...

<div class="lateral">
<b class="b1">...</b>
<a href="zzz4_memorizar-posicao-final-do-scroll-ao-carregar-a-pagina1.php" >pagina1</a>
<b class="b1">... </b>
<a href="zzz4_memorizar-posicao-final-do-scroll-ao-carregar-a-pagina2.php" >pagina2</a>
<b class="b1">...</b>
</div>
<div class="direita"> voce estar na pagina 1 </div>

<!-------------------------------------------------->

<div class="lateral">
<b class="b1">...</b>
<a href="zzz4_memorizar-posicao-final-do-scroll-ao-carregar-a-pagina1.php" >pagina1</a>
<b class="b1">... </b>
<a href="zzz4_memorizar-posicao-final-do-scroll-ao-carregar-a-pagina2.php" >pagina2</a>
<b class="b1">...</b>
</div>
<div class="direita"> voce estar na pagina 2 </div>

...

let sidebar = document.querySelector(".lateral");
//var sidebar = document.querySelector(".lateral").scrollTop;

let top = localStorage.getItem("sidebar-scroll");

if (top !== null) {
  sidebar.scrollTop = parseInt(top, 10);
  //sidebar = parseInt(top, 10);
}
//  beforeunload  onbeforeload
window.addEventListener("beforeunload", () => {
  localStorage.setItem("sidebar-scroll", sidebar.scrollTop);
  //localStorage.setItem("sidebar-scroll", sidebar);
});

 

Share this post


Link to post
Share on other sites

No site do w3c, usaram âncoras, veja que na. URL sempre fica #{algum id}, então o scroll sempre vai para aquele ID.

 

nesse teu código original,  usaram localStorage para armazenar a última posição do scroll no evento beforeunload (antes da pagina ser descarregada), e depois fazem o scroll até lá com o scrollTo.

Share this post


Link to post
Share on other sites

William Bruno, a solução virá rapidamente. Vamos resolver este problema juntos? Estou animado !

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Biel.
      Olá pessoal. Direto ao ponto. O código abaixo imprime todos os dados dentro do while . Existe alguma forma de imprimir todos os dados fora do while ?
      tab_aprendiz cores green yellow blue brown orange <?php $sql = mysqli_query($con, "SELECT * FROM tab_aprendiz"); while($linha=mysqli_fetch_array($sql)){ $cores = $linha['cores']; echo $cores.'<br>'; } ?>  
    • By Biel.
      Olá pessoal . Direto ao ponto. Abaixo tem duas tabelas unidas. Como fazer retornar a quantidade correta de registros  na linha indice 1 
      Gostaria de imprimir na tela este resultado 
      tab_aprendiz tem 2 registros
      tab_aluno tem 3 registros
       
      tab_aprendiz id indice nome 93 1 joao 94 1 lucas 95 2 mateus 96 2 silva tab_aluno id indice carro 67 1 gol 68 1 corsa 69 1 palio 70 2 monza 71 2 vectra 72 2 uno ...
      <?php $sql = mysqli_query($con, "SELECT * FROM tab_aprendiz INNER JOIN tab_aluno ON tab_aprendiz.indice = tab_aluno.indice WHERE indice = '1' "); $quantidade_de_dados1 = mysqli_num_rows($sql); $quantidade_de_dados2 = mysqli_num_rows($sql); echo 'tab_aprendiz tem' .$quantidade_de_dados1. 'registros'; echo 'tab_aluno tem' .$quantidade_de_dados2. 'registros'; ?>  
    • By Biel.
      Olá pessoal. Direto ao ponto. Ao clicar no botão, fica selected somente os itens do selectA. Gostaria que ficasse selected os itens de todos os selects. Há quem dica replica o javascript e altera o atributo id e pronto. A ideia pessoal é resolver o problema com o mínimo de código javascript possível. Obrigado !
      <button onClick="selecionarTodos();" >selecionarTudo</button> <script> function selecionarTodos(){ var array = document.getElementById('aprendiz1'); for(var i = 0; i < array.length; i++){ array[i].selected = true; } } </script> <hr> <br>selectA<br> <select name="selectA" multiple id="aprendiz1" class="aprendiz1" size="2"> <option>1111111111111111</option> <option>2222222222222222</option> </select> <br>selectB<br> <select name="selectB[]" multiple id="aprendiz1" class="aprendiz1" size="3"> <option>1111111111111111</option> <option>2222222222222222</option> <option>3333333333333333</option> </select> <br>selectC<br> <select name="selectC[]" multiple id="aprendiz1" class="aprendiz1" size="3"> <option>1111111111111111</option> <option>2222222222222222</option> <option>3333333333333333</option> </select> <br>selectD<br> <select name="selectD[]" multiple id="aprendiz1" class="aprendiz1" size="3"> <option>1111111111111111</option> <option>2222222222222222</option> <option>3333333333333333</option> </select>  
    • By Biel.
      Olá pessoal. Direito ao ponto. Como fazer o o input se comportar da mesma forma que a div. Note que a largura da div, aumenta ao passo que adicionamos conteúdo. Quero que o input se comporte da mesma forma ou seja aumente a largura ao passo que adicionamos conteúdo no atributo value="" 
      <input type="text" style="border:1px solid #000;" value=""><br><br> <div style="border:1px solid #000; display:inline;">aprendiz aprendiz aprendiz</div>  
       
    • By Biel.
      Olá pessoal. Direto ao ponto. Assim que a pagina1 é acessada, header chega primeiro e redireciona automaticamente para index.php 
      Como fazer que redirecione somente quando o link pagina1.php for clicado?  Obrigado !
      <?php header("location index.php"); ?> <a href="pagina1.php">pagina1.php</a>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.