Home/ Questions/Q 6341063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T19:57:25+00:00

I need an area that automatically scrolls to the bottom when new text comes

  • 0

I need an area that automatically scrolls to the bottom when new text comes in from an ajax request

CSS

div.scroll {
    height: 400px;
    width: 95%;
    overflow: auto;
    /* border: 1px solid #666; */
    background-color: #ccc;
    padding: 8px;
}

HTML

<html>
<head>
<script type="text/javascript">
        //Handle ajax data
    $(document).ready(function()
    {
        setInterval(doAjaxStuff, 2000);

    }); 

    function doAjaxStuff()
    {
        $.ajax
        ({
            url: "http:somewhere/getLog/",
            dataType: 'json',
            success: function(json) 
            {
                if(json.status ==  "on")
                {
                    $('#log').html(json.log);

                    }
            }
    });
</script>
</head>
<body>

    <div class="scroll" id =log >pleas wait for log</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use the scrollTop() function:

    //will only auto-scroll if scroll position is already at bottom 
var doAutoscroll = ($("#log").scrollTop()==$("#log")[0].scrollHeight);
$('#log').html(json.log)
if (doAutoscroll) $("#log").scrollTop($("#log")[0].scrollHeight);
    • 0