How to load html page with the scroll bar of a DIV at the end?

Asked

Viewed 510 times

2

I have a div with a fixed size and containing many large texts within it. I would like that whenever the page that contains it was loaded, it was "focused" (that is, the focus of the page went straight to this div) and automatically the scroll bar of this div was lowered to the end. It is possible to do this just by using html and css? If it is not possible, what would be the alternative methods (putting from the simplest possible to the most difficult)? Below I have the code of the page:

<!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>
html css

2 answers

0

Only with HTML can you point the anchor that the page will go to where it is, something like that:

http://localhost/index#message

Or with javascript when the page is loaded:

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

0


The pre-scrollable class is one of the bootstrap I used, it leaves the div with a 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>

If you want to test just copy everything and play in a new file

  • It worked perfect here. I will apply with the appropriate adaptations. Thank you!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.