Derulați la partea de jos a div?

Aici's ceea ce am folosi pe site-ul meu:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

Acest lucru este mult mai ușor dacă ai're folosind jQuery scrollTop:

$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);

folosind jQuery anima:

$('#DebugContainer').stop().animate({
  scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);

Puteți folosi următorul cod:

function scrollToBottom(id){
   var div = document.getElementById(id);
   div.scrollTop = div.scrollHeight - div.clientHeight;
}

Pentru a efectua un buna derulați cu JQuery:

function scrollSmoothToBottom (id) {
   var div = document.getElementById(id);
   $('#' + id).animate({
      scrollTop: div.scrollHeight - div.clientHeight
   }, 500);
}

Vezi exemplu pe [JSFiddle][1]

Și că's cum funcționează:

[][1]

Ref: scrollTop, scrollHeight, clientHeight

var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));

Lucrări de jQuery 1.6

https://api.jquery.com/scrollTop/

http://api.jquery.com/prop/

Metodă nouă, care funcționează pe toate browserele actuale](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView):

this.scrollIntoView(false);

Dacă tu nu't doriți să se bazeze pe scrollHeight`, următorul cod:

$('#scroll').scrollTop(1000000);

buna derulați cu Javascript:

document.getElementById('mesaje').scrollIntoView({ comportament: 'buna', bloc: 'end' });

Folosind jQuery, scrollTop este folosit pentru a seta poziția verticală a scollbar pentru orice element dat. există, de asemenea, un frumos jquery scrollTo plugin folosit pentru a defila cu animație și opțiuni diferite (demo)

var myDiv = $("#div_id").get(0);
myDiv.scrollTop = myDiv.scrollHeight;

dacă doriți să utilizați jQuery's anima metoda pentru a adăuga animație în timp ce defilare în jos, verificați următorul fragment:

var myDiv = $("#div_id").get(0);
myDiv.animate({
    scrollTop: myDiv.scrollHeight
  }, 500);

Javascript sau jquery:

var scroll = document.getElementById('messages');
   scroll.scrollTop = scroll.scrollHeight;
   scroll.animate({scrollTop: scroll.scrollHeight});

Css:

 .messages
 {
      height: 100%;
      overflow: auto;
  }

Găsit acest lucru foarte util, vă mulțumesc.

Pentru Unghiulare 1.X oameni de acolo:

angular.module('myApp').controller('myController', ['$scope', '$document',
  function($scope, $document) {

    var overflowScrollElement = $document[0].getElementById('your_overflow_scroll_div');
    overflowScrollElement[0].scrollTop = overflowScrollElement[0].scrollHeight;

  }
]);

Doar pentru că ambalajul în jQuery elemente versus HTML DOM elemente devine un pic confuz cu unghiulară.

De asemenea, pentru o aplicație de chat, am găsit de a face această misiune după discuții au fost încărcate pentru a fi util, de asemenea, ar putea avea nevoie să palmă pe scurt timeout la fel de bine.

Doar ca un bonus fragment. Am'm folosind unghiulare și a fost încercarea de a derula un mesaj firul în partea de jos atunci când un utilizator selectat diferite conversații cu utilizatorii. În scopul de a face sigur că scroll funcționează după noile date au fost încărcate în div cu ng-repeat pentru mesaje, înfășurați doar scroll fragment într-un timeout.

$timeout(function(){
    var messageThread = document.getElementById('message-thread-div-id');
    messageThread.scrollTop = messageThread.scrollHeight;
},0)

Care va asigurați-vă că alegeți eveniment este concediat după ce datele au fost introduse în DOM.

mic addendum: suluri numai dacă ultima linie este deja vizibil. dacă defilat un pic, frunze de conținut în cazul în care este (atenție: nu a fost testat cu diferite dimensiuni de font. acest lucru ar putea nevoie de unele ajustări în interiorul ">= comparație"):

var objDiv = document.getElementById(id);
var doScroll=objDiv.scrollTop>=(objDiv.scrollHeight-objDiv.clientHeight);                    

// add new content to div
$('#' + id ).append("new line at end<br>"); // this is jquery!

// doScroll is true, if we the bottom line is already visible
if( doScroll) objDiv.scrollTop = objDiv.scrollHeight;

Puteți, de asemenea, folosind jQuery, atașați o animație a `html,body a documentului prin:

$("html,body").animate({scrollTop:$("#div-id-ul")[0].offsetTop}, 1000);

ceea ce va duce la o buna derulați până la partea de sus a div cu id-ul "div-id-ul".

Am întâlnit aceeași problemă, dar cu o constrângere suplimentară: am avut nici un control asupra codul care a adăugat elemente noi de la cartea recipientului. Nici unul dintre exemplele pe care le-am găsit aici mi-a permis să facă asta. Aici este soluția la care am ajuns .

Se foloseste Mutație de Observatori (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) ceea ce îl face utilizabil doar pe browserele moderne (deși polyfills exista)

Deci, practic, codul nu doar asta :

var scrollContainer = document.getElementById("myId");

// Define the Mutation Observer
var observer = new MutationObserver(function(mutations) {

  // Compute sum of the heights of added Nodes
  var newNodesHeight = mutations.reduce(function(sum, mutation) {
      return sum + [].slice.call(mutation.addedNodes)
        .map(function (node) { return node.scrollHeight || 0; })
        .reduce(function(sum, height) {return sum + height});
  }, 0);

  // Scroll to bottom if it was already scrolled to bottom
  if (scrollContainer.clientHeight + scrollContainer.scrollTop + newNodesHeight + 10 >= scrollContainer.scrollHeight) {
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  }

});

// Observe the DOM Element
observer.observe(scrollContainer, {childList: true});

Am făcut o vioară pentru a demonstra conceptul : https://jsfiddle.net/j17r4bnk/

Acest lucru va permite să derulați tot drumul în jos ceea ce privește documentul înălțime

$('html, body').animate({scrollTop:$(document).height()}, 1000);

Java Script:

document.getElementById('mesaje').scrollIntoView(false);

Pergamentele de la ultima linie de conținutul prezent.

O metoda foarte simpla pentru acest lucru este de a stabili `derulați până la o înălțime de div.

var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);

Derulați până la ultimul element din interiorul div:

myDiv.scrollTop = myDiv.lastChild.offsetTop

Știu că este o întrebare veche, dar niciuna dintre aceste soluții nu a lucrat pentru mine. Am încheiat cu offset().de sus pentru a obține rezultatele dorite. Aici's ceea ce am folosit pentru ușor derulați ecranul în jos la ultimul mesaj în aplicație de chat:

$("#html, body").stop().animate({
     scrollTop: $("#last-message").offset().top
}, 2000);

Sper că acest lucru vă ajută altcineva.