How to get a div to automatically scroll down?

Asked

Viewed 5,877 times

2

I have a div with a lot of text, and I want that when loading the page the div starts to do automatic scroll showing the whole text...

html:

  <div id="corpo">     
    <p> Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notíciaTitulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notíciaTitulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notíciaTitulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notíciaTitulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notícia</p>
</div>

css:

 #corpo
{
    background-color:#000066 ;
    opacity: 0.8;
    filter: alpha(opacity=50);
    width:1000px;
    height:380px;
    position:fixed;
    top:240px;
    left:180px;
    z-index:3;
    overflow: scroll;
    color:white;      
    font-family:Arial;
    font-size:20px;
    font-style:normal;
    font-weight:bold;
}
javascript html css

  • What is the intention of the automatic scroll?

  • Ana, when you say, "show all the text," would you like the div to expand so that all the text is visible or the scroll bar is moving automatically by scrolling down ? if it is the second option you will need to use javascript.

1 answer

4

Using Jquery:

$().ready(function(){
$("#corpo").animate({ scrollTop: 1000 }, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id='corpo' style='height:100px; overflow:scroll; width:500px;'>
Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notíciaTitulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notíciaTitulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notíciaTitulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notíciaTitulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia,
        Titulo da notícia,Titulo da notícia, Titulo da notícia, Titulo da notícia, Titulo da notícia
        Titulo da notícia, Titulo da notícia, Titulo da notícia
</div>

  • was exactly what I needed! thank you very much!

Browser other questions tagged javascript html css

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