Scroll HTML page before it 'reaches' the bottom

frankgreco Published at Dev

frankgreco

I have this chat thread

What it does currently is when it gets to the bottom of the page it scrolls up so that it is always at the bottom of the page.

The issue is that as you can see in the image, it hides behind the form before it reaches the bottom of the page. Hence, I need to redefine what the bottom of my page is:

I have tried:

function scroll() {
    window.scrollTo(0, document.body.scrollHeight + document.getElementById('form_id').offsetHeight);
};

But it seems as though it has no effect from the function listen before this one.

Here is the rest of my code:

<html>
    <head>
        <title>Chat Demo</title>

        <style>
            .top-bar {
                background: #009E60;
                position: relative;
                overflow: hidden; 
            }

            .top-bar::before {
                content: "";
                position: absolute;
                top: -100%;
                left: 0;
                right: 0;
                bottom: -100%;
                opacity: 0.25;
                background: radial-gradient(white, #009E60);
            }

            .top-bar > * {
                position: relative;
            }

            .top-bar::before {
              animation: pulse 1s ease alternate infinite;
            }

            @keyframes pulse {
              from { opacity: 0; }
              to { opacity: 0.5; }
            }


            * {
                margin: 0;
                padding: 0;
            }

            h1{
                padding: 5px;
            }

            body {
                font: 15px Helvetica, Arial;
            }

            form {
                background: #009E60;
                padding: 10px;
                bottom: 0;
                position: fixed;
                width: 60%;
                box-sizing: border-box;
            }

            form input {
                padding: 5px;
                width: 80%;
                margin-right: 0.5%;
                vertical-align: bottom;
                font: 15px Helvetica, Arial;

            }

            form button {   
                width: 18.5%;
                padding: 9px;
                vertical-align: bottom;

            }

            ol {
                padding-bottom: 100px;
            }

            #messages {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }

            #messages li {
                padding: 5px 10px;
            }

            .left {
                padding: 5px 10px;
                background: -webkit-linear-gradient(left,rgba(215,229,228,1),rgba(255,255,255,0)); /*Safari 5.1-6*/
                background: -o-linear-gradient(right,rgba(255,255,255,0),rgba(215,229,228,1)); /*Opera 11.1-12*/
                background: -moz-linear-gradient(right,rgba(255,255,255,0),rgba(215,229,228,1)); /*Fx 3.6-15*/
                background: linear-gradient(to right, rgba(215,229,228,1), rgba(255,255,255,0)); /*Standard*/
                text-align: left;
            }

            .right {
                padding: 5px 10px;
                background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(228,215,229,1)); /*Safari 5.1-6*/
                background: -o-linear-gradient(right,rgba(228,215,229,1),rgba(255,255,255,0)); /*Opera 11.1-12*/
                background: -moz-linear-gradient(right,rgba(228,215,229,1),rgba(255,255,255,0)); /*Fx 3.6-15*/
                background: linear-gradient(to right,rgba(255,255,255,0),rgba(228,215,229,1)); /*Standard*/
                text-align: right;
            }

            .module {
              width: 60%;
              margin: 20px auto;
            }
        </style>

    </head>

    <body>

        <section class="module">

            <div id="wrapper">
                <div id="header">
                    <header class="top-bar">
                        <h1>Chat Demo</h1>
                    </header>
                </div>
                <div id="content">
                    <ol id="messages"></ol>
                </div>
                <div id="footer">
                    <form id="form_id" action = "#">
                        <input id = "user_input"/>
                        <button id="btn_id">send</button>
                    </form>
                </div>
            </div>
        </section>

        <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
        <script>
            var socket = io();

            $("#form_id").submit(function(){
                var value = $("#user_input").val();
                if(value.length > 0 && value != "Default text"){
                    socket.emit('message from me', value);
                    $('#messages').append($('<li class="right">').text(value));
                    $('#user_input').val('');
                    scroll();
                }
                return false;
            });

            socket.on('message', function(msg){
                $('#messages').append($('<li class="left">').text(msg));
            });

            function scroll() {
                window.scrollTo(0, document.body.scrollHeight);
            };

        </script>

    </body>
</html>

Pradeep Andrewson

Hi just add this css in your html page you will get output div#footer { margin-top: 10px; }

Collected from the Internet

Please contact debug[email protected] to delete if infringement.