Set focus to the end of table inside of div when adding a new row.

Question

I have a table within a div with a set height, when the table is bigger than the div the scroll-y bar appear. The problem is that if the scroll bar of the div is at the top, leaving other row at the bottom hidden, and the user press the button to add a new row, this row is added at the bottom of the table, therefore you can't see it.

Is there anyway with javascript, vbscript, or css to set focus to the row it's been created so it is visible when added?

This is the code where the function to add a new row would be called.

   strRow = strRow + "<div>
        <input ID='AddRowTableNew_" + cstr(newrow.id) + "' type='button' 
        value='Add New Row' 
        onclick='vbscript:AddNewRow 0," + cstr(newRow.id)+ "'/>
    </div>"

Any help would be appreciated.

PD: I would need this to be on VBScript or JavaScript, No JQuery please.

Thanks.

Answer 1

Try this ...

var div = document.getElementById('the_div');
div.scrollTop = div.scrollHeight;

Hope it helps.

Answer 2

Try Element.scrollIntoView();. It works in Firefox, IE6+, Opera and Google Chrome/Safari.

You can also provide a boolean to the function which will specify where to scroll the element to:

// Align the element with the top of the parent
Element.scrollIntoView();
Element.scrollIntoView(true);

// Align the element with the bottom of the parent
Element.scrollIntoView(false);

EDIT: MDC documentation for scrollIntoView with an example

To scroll to the bottom, you could also just set the element's scrollTop property to equal the scrollHeight property:

Element.scrollTop = Element.scrollHeight;