2

Tenho uma div com um tamanho fixo e que contém textos muitos grandes dentro dela. Gostaria que sempre que a página que a contém fosse carregada, ela fosse "focada" (ou seja, o foco da página fosse direto pra essa div) e automaticamente a barra de rolagem dessa div fosse descida até o final. É possível fazer isso apenas usando html e css? Se não for possível, quais seriam os métodos alternativos (colocando do mais simples possível até o mais difícil)? Abaixo tenho o código da página:

<!DOCTYPE html>
<html>
  <head>
    <title>Página Inicial</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>

    <div class="container">
      <p id="message">
        <%= message %>
      </p>

    </div>

  </body>
</html>

2 Respostas 2

0

A class pre-scrollable é uma do bootstrap que eu usei, ele deixa a div com um scroll

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>    
    <body>
        <div id="divMensagem" class="pre-scrollable">
          <p id="message">
            <br><br><br><br><br><br><br><br><br><br> <!-- aqui seria a <%= message %> -->
          </p>

        </div>

        <script>
        $(document).ready(function() {
                var divMensagem = document.getElementById('divMensagem');
                divMensagem.scrollTop = divMensagem.scrollHeight;
        });
        </script>
    </body>
</html>

Se quiser testar é so copiar tudo e jogar em um arquivo novo

1
  • Funcionou perfeito aqui. Vou aplicar com as devidas adaptações. Obrigado!
    – MonitorLPI
    Commented 11/10/2017 às 21:15
0

Apenas com HTML você pode apontar a âncora que a página irá até onde ela está, algo assim:

http://localhost/index#message

Ou com javascript ao página ser carregada:

function irAté(div){
    var url = location.href;
    location.href = "#"+div;
    history.replaceState(null,null,url);
}​

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .