How to keep the "scroll" at the bottom of the page?

Question

I need to keep the page always with scroll positioned at the end.

I used that code:

function scroll() {  
    var objScrDiv = document.getElementById("ultimalinha");  
    objScrDiv.scrollTop = objScrDiv.scrollHeight;  
}

But I didn’t get the operation right getElementById("oquequerqueeucapture"); any hint?

Answer 1

To force your element with the ID qualquerCoisa, that is receiving content, always keeping the scroll in the end, you should call your function that takes the scroll down after and whenever you add content to that element:

/* Função igual à tua, onde a chamada da mesma é que vai fazer a diferença.
 */
function updateScroll() {
    var element = document.getElementById("oTeuId");
    element.scrollTop = element.scrollHeight;
}

Example

Example also available on Jsfiddle.

See the example below that simulates adding content to an element and then calls the function that will keep the scroll in the end:

function updateScroll() {
  var element = document.getElementById("oTeuId");
  element.scrollTop = element.scrollHeight;
}

// primeira chamada ao carregar a página
updateScroll();

// adicionar conteúdo, simulando chamada Ajax
i = 5;

function minhaChamadaAjax() {

  i++;

  var div = document.getElementById("oTeuId");

  // mais conteúdo para o elemento
  var oNewP = document.createElement("p");
  var oText = document.createTextNode(i + " Nunc tristique, justo ac fermentum tincidunt, erat eros dignissim mauris, id molestie tortor risus vel eros. Donec nulla est, condimentum id auctor ac, fringilla non elit. Ut eu diam tincidunt, dapibus neque ut, iaculis tortor. Nunc congue nisl a diam luctus, id consequat ante aliquet. Donec elit mauris, aliquam vel cursus quis, vulputate lacinia turpis. Curabitur semper justo ante, a suscipit nisi laoreet at. Nam laoreet maximus turpis, ut luctus tortor finibus sit amet. Donec nec tristique leo. Fusce sollicitudin molestie lectus vitae pulvinar. Suspendisse quis arcu blandit, ultricies lacus vitae, maximus eros.");
  oNewP.appendChild(oText);
  div.appendChild(oNewP);

  // chama atualização do scroll
  updateScroll();
}
var timerId = window.setInterval(minhaChamadaAjax, 1000);

// parar a demonstração ao fim de 10 segundos (ainda estás a observar?)
setTimeout(function() {
  clearInterval(timerId)
}, 10000);

html,
body {
  height: 100%;
  overflow: hidden;
}
#oTeuId {
  border: 1px solid #ccc;
  height: 80%;
  overflow-y: scroll;
}

<div id="oTeuId">
  <p><strong>1</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis ipsum, eget posuere ligula tincidunt in. Etiam ut urna in justo tincidunt pretium. Aenean aliquam enim sed urna euismod, sed fermentum nibh consequat. Phasellus egestas lacus in erat pretium, in imperdiet lacus aliquam. Phasellus vehicula mi eu justo congue vestibulum. Etiam egestas nulla libero, ut hendrerit ante ornare nec. Phasellus tempor mi sed nunc elementum ullamcorper. Aliquam erat volutpat. Sed finibus suscipit ex. Etiam posuere sapien a urna rutrum varius. Praesent pulvinar sapien mauris, at finibus diam facilisis at. Fusce congue neque ullamcorper, luctus dui id, gravida nisl. Pellentesque feugiat congue magna, ut elementum lectus varius non. Nulla facilisi. Phasellus condimentum hendrerit finibus. In tincidunt tempus felis quis gravida.</p>
  <p><strong>2</strong> Nulla in mi a arcu hendrerit euismod. Duis sed mi diam. Sed sagittis elit sapien. In rhoncus dictum mauris, at semper lacus interdum eu. Aenean a velit sit amet lectus mollis molestie. Ut viverra pharetra diam, ac egestas ipsum elementum eget. Integer id dictum velit, ut finibus nulla. Fusce malesuada felis eu dui fermentum posuere eget at erat. Morbi facilisis arcu nec imperdiet venenatis. Nunc tempor quam ac nunc condimentum maximus. Pellentesque dolor sem, mattis a libero iaculis, cursus tristique mauris. Pellentesque hendrerit leo quis semper suscipit. Aliquam tincidunt tortor id tristique accumsan. Curabitur commodo ante eu nunc egestas, id consequat quam porttitor. Cras a ipsum eu ante rutrum finibus vitae et erat.</p>
  <p><strong>3</strong> Praesent quis ipsum id dolor iaculis egestas. In hac habitasse platea dictumst. Aliquam malesuada nunc sit amet dictum consequat. Morbi eget nulla pellentesque, consequat purus quis, rhoncus nisl. Morbi tempor leo eu eros finibus vehicula quis eu ligula. Phasellus odio nulla, maximus et tristique ut, rutrum at mi. Fusce et tincidunt odio. Maecenas semper lectus et hendrerit cursus. In pharetra luctus eros, in pretium mi convallis sit amet. Integer facilisis felis et lacus faucibus, at mattis diam blandit. Maecenas eu erat non metus tincidunt aliquam sit amet vitae diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec commodo consequat aliquet. Nulla tortor est, sodales et ullamcorper in, semper a ligula. Aliquam congue dui nec porta dapibus.</p>
  <p><strong>4</strong> Suspendisse feugiat sapien eu ipsum accumsan suscipit. Vestibulum fermentum fringilla ligula, id iaculis elit posuere sed. Vivamus eu imperdiet nisi. Phasellus vulputate posuere enim ac commodo. Suspendisse ac nisi eget turpis porttitor feugiat eu et diam. Vestibulum commodo turpis et leo lobortis, in efficitur libero pulvinar. Nunc mollis ligula ut tortor congue tristique.</p>
  <p><strong>5</strong> Proin eu purus eget nunc mollis convallis ac eget dolor. Duis mollis ultrices posuere. Pellentesque finibus dui in neque tristique interdum. Vestibulum iaculis, diam in pharetra fermentum, velit metus dapibus justo, finibus sodales ipsum sem nec sem. Aliquam scelerisque lobortis eros, vel sodales enim rutrum sit amet. Duis semper metus justo, ultrices iaculis quam rhoncus ut. Aenean vel feugiat lacus. Donec a magna vel nulla porta imperdiet eleifend non nisi.</p>
</div>

Answer 2

yes, it helps a lot, would have to then include a DIV to be able to say what'? the elementById(n_VAR) will capture, helped a lot! Grateful

function updateScroll() {
  var element = document.getElementById("oTeuId");
  element.scrollTop = element.scrollHeight;
}

// primeira chamada ao carregar a página
updateScroll();

// adicionar conteúdo, simulando chamada Ajax
i = 5;

function minhaChamadaAjax() {

  i++;

  var div = document.getElementById("oTeuId");

  // mais conteúdo para o elemento
  var oNewP = document.createElement("p");
  var oText = document.createTextNode(i + " Nunc tristique, justo ac fermentum tincidunt, erat eros dignissim mauris, id molestie tortor risus vel eros. Donec nulla est, condimentum id auctor ac, fringilla non elit. Ut eu diam tincidunt, dapibus neque ut, iaculis tortor. Nunc congue nisl a diam luctus, id consequat ante aliquet. Donec elit mauris, aliquam vel cursus quis, vulputate lacinia turpis. Curabitur semper justo ante, a suscipit nisi laoreet at. Nam laoreet maximus turpis, ut luctus tortor finibus sit amet. Donec nec tristique leo. Fusce sollicitudin molestie lectus vitae pulvinar. Suspendisse quis arcu blandit, ultricies lacus vitae, maximus eros.");
  oNewP.appendChild(oText);
  div.appendChild(oNewP);

  // chama atualização do scroll
  updateScroll();
}
var timerId = window.setInterval(minhaChamadaAjax, 1000);

// parar a demonstração ao fim de 10 segundos (ainda estás a observar?)
setTimeout(function() {
  clearInterval(timerId)
}, 10000);

html,
body {
  height: 100%;
  overflow: hidden;
}
#oTeuId {
  border: 1px solid #ccc;
  height: 80%;
  overflow-y: scroll;
}

<div id="oTeuId">
  <p><strong>1</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis ipsum, eget posuere ligula tincidunt in. Etiam ut urna in justo tincidunt pretium. Aenean aliquam enim sed urna euismod, sed fermentum nibh consequat. Phasellus egestas lacus in erat pretium, in imperdiet lacus aliquam. Phasellus vehicula mi eu justo congue vestibulum. Etiam egestas nulla libero, ut hendrerit ante ornare nec. Phasellus tempor mi sed nunc elementum ullamcorper. Aliquam erat volutpat. Sed finibus suscipit ex. Etiam posuere sapien a urna rutrum varius. Praesent pulvinar sapien mauris, at finibus diam facilisis at. Fusce congue neque ullamcorper, luctus dui id, gravida nisl. Pellentesque feugiat congue magna, ut elementum lectus varius non. Nulla facilisi. Phasellus condimentum hendrerit finibus. In tincidunt tempus felis quis gravida.</p>
  <p><strong>2</strong> Nulla in mi a arcu hendrerit euismod. Duis sed mi diam. Sed sagittis elit sapien. In rhoncus dictum mauris, at semper lacus interdum eu. Aenean a velit sit amet lectus mollis molestie. Ut viverra pharetra diam, ac egestas ipsum elementum eget. Integer id dictum velit, ut finibus nulla. Fusce malesuada felis eu dui fermentum posuere eget at erat. Morbi facilisis arcu nec imperdiet venenatis. Nunc tempor quam ac nunc condimentum maximus. Pellentesque dolor sem, mattis a libero iaculis, cursus tristique mauris. Pellentesque hendrerit leo quis semper suscipit. Aliquam tincidunt tortor id tristique accumsan. Curabitur commodo ante eu nunc egestas, id consequat quam porttitor. Cras a ipsum eu ante rutrum finibus vitae et erat.</p>
  <p><strong>3</strong> Praesent quis ipsum id dolor iaculis egestas. In hac habitasse platea dictumst. Aliquam malesuada nunc sit amet dictum consequat. Morbi eget nulla pellentesque, consequat purus quis, rhoncus nisl. Morbi tempor leo eu eros finibus vehicula quis eu ligula. Phasellus odio nulla, maximus et tristique ut, rutrum at mi. Fusce et tincidunt odio. Maecenas semper lectus et hendrerit cursus. In pharetra luctus eros, in pretium mi convallis sit amet. Integer facilisis felis et lacus faucibus, at mattis diam blandit. Maecenas eu erat non metus tincidunt aliquam sit amet vitae diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec commodo consequat aliquet. Nulla tortor est, sodales et ullamcorper in, semper a ligula. Aliquam congue dui nec porta dapibus.</p>
  <p><strong>4</strong> Suspendisse feugiat sapien eu ipsum accumsan suscipit. Vestibulum fermentum fringilla ligula, id iaculis elit posuere sed. Vivamus eu imperdiet nisi. Phasellus vulputate posuere enim ac commodo. Suspendisse ac nisi eget turpis porttitor feugiat eu et diam. Vestibulum commodo turpis et leo lobortis, in efficitur libero pulvinar. Nunc mollis ligula ut tortor congue tristique.</p>
  <p><strong>5</strong> Proin eu purus eget nunc mollis convallis ac eget dolor. Duis mollis ultrices posuere. Pellentesque finibus dui in neque tristique interdum. Vestibulum iaculis, diam in pharetra fermentum, velit metus dapibus justo, finibus sodales ipsum sem nec sem. Aliquam scelerisque lobortis eros, vel sodales enim rutrum sit amet. Duis semper metus justo, ultrices iaculis quam rhoncus ut. Aenean vel feugiat lacus. Donec a magna vel nulla porta imperdiet eleifend non nisi.</p>
</div>

function updateScroll() {
  var element = document.getElementById("oTeuId");
  element.scrollTop = element.scrollHeight;
}

// primeira chamada ao carregar a página
updateScroll();

// adicionar conteúdo, simulando chamada Ajax
i = 5;

function minhaChamadaAjax() {

  i++;

  var div = document.getElementById("oTeuId");

  // mais conteúdo para o elemento
  var oNewP = document.createElement("p");
  var oText = document.createTextNode(i + " Nunc tristique, justo ac fermentum tincidunt, erat eros dignissim mauris, id molestie tortor risus vel eros. Donec nulla est, condimentum id auctor ac, fringilla non elit. Ut eu diam tincidunt, dapibus neque ut, iaculis tortor. Nunc congue nisl a diam luctus, id consequat ante aliquet. Donec elit mauris, aliquam vel cursus quis, vulputate lacinia turpis. Curabitur semper justo ante, a suscipit nisi laoreet at. Nam laoreet maximus turpis, ut luctus tortor finibus sit amet. Donec nec tristique leo. Fusce sollicitudin molestie lectus vitae pulvinar. Suspendisse quis arcu blandit, ultricies lacus vitae, maximus eros.");
  oNewP.appendChild(oText);
  div.appendChild(oNewP);

  // chama atualização do scroll
  updateScroll();
}
var timerId = window.setInterval(minhaChamadaAjax, 1000);

// parar a demonstração ao fim de 10 segundos (ainda estás a observar?)
setTimeout(function() {
  clearInterval(timerId)
}, 10000);

html,
body {
  height: 100%;
  overflow: hidden;
}
#oTeuId {
  border: 1px solid #ccc;
  height: 80%;
  overflow-y: scroll;
}

<div id="oTeuId">
  <p><strong>1</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis ipsum, eget posuere ligula tincidunt in. Etiam ut urna in justo tincidunt pretium. Aenean aliquam enim sed urna euismod, sed fermentum nibh consequat. Phasellus egestas lacus in erat pretium, in imperdiet lacus aliquam. Phasellus vehicula mi eu justo congue vestibulum. Etiam egestas nulla libero, ut hendrerit ante ornare nec. Phasellus tempor mi sed nunc elementum ullamcorper. Aliquam erat volutpat. Sed finibus suscipit ex. Etiam posuere sapien a urna rutrum varius. Praesent pulvinar sapien mauris, at finibus diam facilisis at. Fusce congue neque ullamcorper, luctus dui id, gravida nisl. Pellentesque feugiat congue magna, ut elementum lectus varius non. Nulla facilisi. Phasellus condimentum hendrerit finibus. In tincidunt tempus felis quis gravida.</p>
  <p><strong>2</strong> Nulla in mi a arcu hendrerit euismod. Duis sed mi diam. Sed sagittis elit sapien. In rhoncus dictum mauris, at semper lacus interdum eu. Aenean a velit sit amet lectus mollis molestie. Ut viverra pharetra diam, ac egestas ipsum elementum eget. Integer id dictum velit, ut finibus nulla. Fusce malesuada felis eu dui fermentum posuere eget at erat. Morbi facilisis arcu nec imperdiet venenatis. Nunc tempor quam ac nunc condimentum maximus. Pellentesque dolor sem, mattis a libero iaculis, cursus tristique mauris. Pellentesque hendrerit leo quis semper suscipit. Aliquam tincidunt tortor id tristique accumsan. Curabitur commodo ante eu nunc egestas, id consequat quam porttitor. Cras a ipsum eu ante rutrum finibus vitae et erat.</p>
  <p><strong>3</strong> Praesent quis ipsum id dolor iaculis egestas. In hac habitasse platea dictumst. Aliquam malesuada nunc sit amet dictum consequat. Morbi eget nulla pellentesque, consequat purus quis, rhoncus nisl. Morbi tempor leo eu eros finibus vehicula quis eu ligula. Phasellus odio nulla, maximus et tristique ut, rutrum at mi. Fusce et tincidunt odio. Maecenas semper lectus et hendrerit cursus. In pharetra luctus eros, in pretium mi convallis sit amet. Integer facilisis felis et lacus faucibus, at mattis diam blandit. Maecenas eu erat non metus tincidunt aliquam sit amet vitae diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec commodo consequat aliquet. Nulla tortor est, sodales et ullamcorper in, semper a ligula. Aliquam congue dui nec porta dapibus.</p>
  <p><strong>4</strong> Suspendisse feugiat sapien eu ipsum accumsan suscipit. Vestibulum fermentum fringilla ligula, id iaculis elit posuere sed. Vivamus eu imperdiet nisi. Phasellus vulputate posuere enim ac commodo. Suspendisse ac nisi eget turpis porttitor feugiat eu et diam. Vestibulum commodo turpis et leo lobortis, in efficitur libero pulvinar. Nunc mollis ligula ut tortor congue tristique.</p>
  <p><strong>5</strong> Proin eu purus eget nunc mollis convallis ac eget dolor. Duis mollis ultrices posuere. Pellentesque finibus dui in neque tristique interdum. Vestibulum iaculis, diam in pharetra fermentum, velit metus dapibus justo, finibus sodales ipsum sem nec sem. Aliquam scelerisque lobortis eros, vel sodales enim rutrum sit amet. Duis semper metus justo, ultrices iaculis quam rhoncus ut. Aenean vel feugiat lacus. Donec a magna vel nulla porta imperdiet eleifend non nisi.</p>
</div>