Przewiń na dół div?

Jest to znacznie łatwiejsze, jeśli używasz jQuery:

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

Using jQuery animate :

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

Możesz użyć następującego kodu:

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

Aby wykonać smooth scroll, użyj następującego kodu (wymagaj jQuery):

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

Zobacz próbkę na JSFiddle

I tak to działa:

Ref: scrollTop, scrollHeight, clientHeight

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

Działa z jQuery 1.6

Https://api.jquery.com/scrollTop/

Http://api.jquery.com/prop/

Nowsza Metoda:

this.scrollIntoView(false);

Jeśli nie chcesz polegać na scrollHeight, pomaga następujący kod:

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

Używając jQuery, scrollTop służy do ustawiania pionowej pozycji scollbara dla dowolnego elementu. istnieje również ładny jQuery scrollTo plugin używany do przewijania z animacją i różnymi opcjami (dema)

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

Jeśli chcesz użyć metody jQuery animate , Aby dodać animację podczas przewijania w dół, sprawdź następujący fragment:

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

Uważam, że to bardzo pomocne, dziękuję.

Dla kąta 1.XD:

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;

  }
]);

Tylko dlatego, że zawijanie elementów jQuery w elementy HTML DOM robi się trochę mylące z angular.

Również w przypadku aplikacji do czatu, stwierdziłem, że wykonanie tego zadania po załadowaniu czatów jest przydatne, możesz również potrzebować krótkiego limitu czasu.

Mały dodatek: tylko przewijanie, jeśli ostatnia linia jest już widoczna. jeśli przewijany kawałek, pozostawia zawartość tam, gdzie jest (uwaga: nie testowane z różnymi rozmiarami czcionek. może to wymagać pewnych poprawek wewnątrz "> = comparison"):

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;

Tylko jako bonus. Używam angular i próbowałem przewijać wątek wiadomości do dołu, gdy użytkownik wybrał różne rozmowy z użytkownikami. Aby upewnić się, że scroll działa po załadowaniu nowych danych do div za pomocą ng-repeat for messages, wystarczy zawinąć fragment przewijania w czasie.

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

To upewni się, że zdarzenie scroll zostanie wywołane po włożeniu danych do DOM.

Javascript lub jquery:

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

Css:

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

To pozwoli Ci przewijać w dół o wysokość dokumentu

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

Możesz również, używając jQuery, dołączyć animację do html,body dokumentu poprzez:

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

Co spowoduje płynne przewinięcie do góry div o id "div-id".

Napotkałem ten sam problem, ale z dodatkowym ograniczeniem: nie miałem kontroli nad kodem, który dołączał nowe elementy do kontenera przewijania. Żaden z przykładów, które tu znalazłem, nie pozwolił mi na to. Oto rozwiązanie, z którym skończyłem .

Używa Mutation Observers (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ), co sprawia, że można go używać tylko w nowoczesnych przeglądarkach (choć istnieją polyfills)

Więc w zasadzie kod robi właśnie to :

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});

Zrobiłem skrzypce, aby zademonstrować koncepcję : https://jsfiddle.net/j17r4bnk/

Java Script:

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

Przewija do ostatniego wiersza obecnej zawartości.

Bardzo prostą metodą jest ustawienie scroll to na wysokość div.

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

Wiem, że to stare pytanie, ale żadne z tych rozwiązań mi nie wyszło. Skończyło się na użyciu offset ().top, aby uzyskać pożądane rezultaty. Oto, co kiedyś delikatnie przewiń ekran w dół do ostatniej wiadomości w mojej aplikacji na czacie:

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