Jump to content
Biel.

scroll javascript

Recommended Posts

pelo que entendi você definiu no seu exemplo apenas pagina1 mas olhando seu código você tem pagina1 e pagina2. o que concluo que você está tentando clicar em um link que leva para pagina diferente da atual, e mesmo assim quer manter a posição da scroll bar.

Acho que você deveria ler sobre SPA(Single Page Application).

Motivo: Se o meu raciocínio está correto em relação a sua intenção, tudo que fizer para contornar isso, exceto se utilizar ajax será um workaround ou de forma chula "gambiarra". o motivo do scroll não permanecer no mesmo local e que após o linkser clicado isso irá redirecionar, o browser executa um recarregamento da página então para o browser sempre será como a primeira vez ou como um reload. para resolver isso foi utilizado o ajax por muito tempo, para evitar o recarregamento de paginas e por sua evolução hoje existem os famosos frameworks SPA como "Angular, React, Vue". Então se quer fazer com Javascript vanilla ou puro então pesquise sobre Ajax!

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. 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); });  
    • By Biel.
      Olá pessoal. Direto ao ponto. Nesta URL temos dois input type="radio" e alguns links.  Gostaria que ao clicar em um link qualquer o input type=""radio que marquei continuasse marcado . Segue o código que está na URL . Obrigado !
      <style> .box1{ margin-bottom:10px; } .tete_label{ cursor:pointer; } .box2{ display:none; } input:checked ~ .box2{ display:block; } </style> <div class="box1"> <input type="radio" name="item" id="1" /> <label for="1" class="tete_label" >Cores</label> <div class="box2"> <a href="19_5a.php">verde</a><br> <a href="19_5b.php">azul</a><br> <a href="19_5c.php">violeta</a><br> </div> </div> <!-- ------------------------------------------------ --> <div class="box1"> <input type="radio" name="item" id="2" /> <label for="2" class="tete_label" >Carros</label> <div class="box2"> <a href="19_6a.php">fiat</a><br> <a href="19_6b.php">palio</a><br> <a href="19_6c.php">corsa</a><br> </div> </div> ...
      <script> var teste1 = document.getElementById('1').checked=true; function func_1(){ } </script>  
    • By Biel.
      Olá pessoal. Direto ao ponto. Ao clicar no link o valor 200 aparece e some.  Gostaria que aparecesse e permanecesse. Quero muito resolver a tarefa abaixo somente com javascript sem php .  
      <a href="pagina1.php" onClick="func_1()">link</a><br><br> <p id="p1"></p> <script> function func_1(){ var x = 200; document.getElementById('p1').innerHTML = x; } </script>  
    • By Biel.
      Olá pessoal . Direto ao ponto. Abaixo temos EX1 e EX2. 
      Ex1 mesmo atualizando a página(f5) o valor green permanece.
      Ex2 também gostaria que mesmo atualizando a página(f5) o valor fiat permanecesse. Lembrando que Ex2 tem uma função e um botão. Obrigado !
      EX1 localStorage.setItem('color', 'green'); var tete = localStorage.getItem('color'); console.log(tete); //============================================= EX2 <button onclick="func_1()">botão</button> function func_1(){ localStorage.setItem('carro', 'fiat'); var tete = localStorage.getItem('carro'); console.log(tete); //document.onchange=tete; }  
    • By Biel.
      Olá pessoal. Direto ao ponto. Quero clicar em um link qualquer e exibir seu conteúdo sem refresh na página. 
      <div id="box"> <a href="pagina1.php">pagina 1 </a><br> <br> <a href="pagina2.php">pagina 2 </a><br> <br> </div> <div id="conteudo"> conteudo da pagina 1 </div> ========================== esta á a pagina2.php <div id="box"> <a href="pagina1.php">pagina 1 </a><br> <br> <a href="pagina2.php">pagina 2 </a><br> <br> </div> <div id="conteudo"> conteudo da pagina 2 </div>  
×

Important Information

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