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

Question

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

Navigation

#1 by (0 votes)
#2 by (0 votes)

2

I have a div with a fixed size and it contains many large texts inside it. I would like that whenever the page that contains it was loaded, it was "focused" (ie the focus of the page went straight to that div) and automatically the scrollbar of that div was lowered to the end. Is it possible to do this only by using html and css ? If it is not possible, what would be the alternative methods (putting it from the simplest to the most difficult)? Below is the code for 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

asked by anonymous 11.10.2017 / 22:48

2 answers

0

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

http://localhost/index#message

Or with javascript to load page:

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

11.10.2017 / 22:53

Have the identifier in a table row List Tree Categories in Laravel 5.1

score 0 · Accepted Answer

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><scriptsrc="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