Scrollen Sie automatisch zum Ende der Seite

Bedenken Sie, ich habe eine Liste mit Fragen. Wenn ich auf die erste Frage klicke, sollte ich automatisch zum Ende der Seite gelangen.

Tatsächlich weiß ich, dass dies mit jQuery möglich ist.

Könnten Sie mir eine Dokumentation oder einige Links zur Verfügung stellen, unter denen ich eine Antwort auf diese Frage finden kann?

BEARBEITEN: Sie müssen zu einem bestimmten HTML- Element am Ende der Seite scrollen

jQuery ist nicht erforderlich. Die meisten der besten Ergebnisse einer Google-Suche gaben mir folgende Antwort:

window.scrollTo(0,document.body.scrollHeight);

Wenn Sie verschachtelte Elemente haben, wird das Dokument möglicherweise nicht gescrollt. In diesem Fall müssen Sie auf das Bildlaufelement abzielen und stattdessen dessen Bildlaufhöhe verwenden.

window.scrollTo(0,document.querySelector(".scrollingContainer").scrollHeight);

Sie können dies mit dem onclickEreignis Ihrer Frage verknüpfen (dh <div onclick="ScrollToBottom()" ...).

Einige zusätzliche Quellen, die Sie sich ansehen können:

• http://www.sourcetricks.com/2010/07/javascript-scroll-to-bottom-of-page.html
• http://www.alecjacobson.com/weblog/?p=753
• http://www.mediacollege.com/internet/javascript/page/scroll.html
• http://www.electrictoolbox.com/jquery-scroll-bottom/

Wenn Sie die gesamte Seite nach unten scrollen möchten:

var scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;

Siehe das Beispiel auf JSFiddle

Wenn Sie ein Element nach unten scrollen möchten:

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

Und so funktioniert es:

Ref: scrollTop , scrollHeight , clientHeight

UPDATE: Die neuesten Versionen von Chrome (61+) und Firefox unterstützen kein Scrollen des Körpers. Siehe: https://dev.opera.com/articles/fixing-the-scrolltop-bug/

Vanilla JS-Implementierung:

element.scrollIntoView(false);

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Sie können dies verwenden, um die Seite in einem Animationsformat aufzurufen.

$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");

Unten sollte die browserübergreifende Lösung sein. Es wurde auf Chrome, Firefox, Safari und IE11 getestet

window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);

window.scrollTo (0, document.body.scrollHeight); funktioniert nicht mit Firefox, zumindest für Firefox 37.0.2

Sie können diese Funktion überall dort verwenden, wo Sie sie aufrufen müssen:

function scroll_to(div){
   if (div.scrollTop < div.scrollHeight - div.clientHeight)
        div.scrollTop += 10; // move down

}

jquery.com: ScrollTo

Manchmal erstreckt sich die Seite beim Scrollen nach Buttom (zum Beispiel in sozialen Netzwerken), um zum Ende zu scrollen (ultimatives Buttom der Seite). Ich verwende dieses Skript:

var scrollInterval = setInterval(function() { 
    document.documentElement.scrollTop = document.documentElement.scrollHeight;
}, 50);

Wenn Sie sich in der Javascript-Konsole des Browsers befinden, kann es hilfreich sein, das Scrollen zu stoppen. Fügen Sie also Folgendes hinzu:

var stopScroll = function() { clearInterval(scrollInterval); };

Und dann benutzen stopScroll();.

Wenn Sie zu einem bestimmten Element scrollen müssen, verwenden Sie:

var element = document.querySelector(".element-selector");
element.scrollIntoView();

Oder ein universelles Skript zum automatischen Scrollen zu einem bestimmten Element (oder zum Stoppen des Bildlaufintervalls):

var notChangedStepsCount = 0;
var scrollInterval = setInterval(function() {
    var element = document.querySelector(".element-selector");
    if (element) { 
        // element found
        clearInterval(scrollInterval);
        element.scrollIntoView();
    } else if((document.documentElement.scrollTop + window.innerHeight) != document.documentElement.scrollHeight) { 
        // no element -> scrolling
        notChangedStepsCount = 0;
        document.documentElement.scrollTop = document.documentElement.scrollHeight;
    } else if (notChangedStepsCount > 20) { 
        // no more space to scroll
        clearInterval(scrollInterval);
    } else {
        // waiting for possible extension (autoload) of the page
        notChangedStepsCount++;
    }
}, 50);

Sie können dies auch mit Animation tun, es ist sehr einfach

$('html, body').animate({
   scrollTop: $('footer').offset().top
   //scrollTop: $('#your-id').offset().top
   //scrollTop: $('.your-class').offset().top
}, 'slow');

Hoffnung hilft, danke

Ein Liner zum glatten Scrollen nach unten

window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });

Um nach oben einfach eingestellt topzu0

Sie können ein beliebiges idReferenzattribut hrefdes Linkelements anhängen :

<a href="#myLink" id="myLink">
    Click me
</a>

Wenn der Benutzer Click meim obigen Beispiel unten auf der Seite klickt , navigiert die Navigation zu sich Click meselbst.

Sie können Gentle Anchors ein schönes Javascript-Plugin ausprobieren .

Beispiel:

function SomeFunction() {
  // your code
  // Pass an id attribute to scroll to. The # is required
  Gentle_Anchors.Setup('#destination');
  // maybe some more code
}

Kompatibilität getestet am:

• Mac Firefox, Safari, Oper
• Windows Firefox, Opera, Safari, Internet Explorer 5.55+
• Linux ungetestet, sollte aber zumindest mit Firefox in Ordnung sein

Spät zur Party, aber hier ist ein einfacher Javascript-Code, mit dem Sie jedes Element nach unten scrollen können :

function scrollToBottom(e) {
  e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height;
}

Verwenden Sie zum Scrollen in Selen den folgenden Code:

Scrollen Sie bis zum unteren Dropdown bis zur Höhe der Seite. Verwenden Sie den folgenden Javascript-Code, der sowohl in JavaScript als auch in React einwandfrei funktioniert.

JavascriptExecutor jse = (JavascriptExecutor) driver; // (driver is your browser webdriver object) 
jse.executeScript("window.scrollBy(0,document.body.scrollHeight || document.documentElement.scrollHeight)", "");

So viele Antworten, die versuchen, die Höhe des Dokuments zu berechnen. Aber es war nicht richtig für mich zu berechnen. Beide funktionierten jedoch:

jquery

    $('html,body').animate({scrollTop: 9999});

oder einfach nur js

    window.scrollTo(0,9999);

Hier ist meine Lösung:

 //**** scroll to bottom if at bottom

 function scrollbottom() {
    if (typeof(scr1)!='undefined') clearTimeout(scr1)   
    var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
    var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
    if((scrollTop + window.innerHeight) >= scrollHeight-50) window.scrollTo(0,scrollHeight+50)
    scr1=setTimeout(function(){scrollbottom()},200) 
 }
 scr1=setTimeout(function(){scrollbottom()},200)

Dadurch wird garantiert nach unten gescrollt

Kopfcodes

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script language="javascript" type="text/javascript">
function scrollToBottom() {
  $('#html, body').scrollTop($('#html, body')[0].scrollHeight);
}
</script>

Körpercode

<a href="javascript:void(0);" onmouseover="scrollToBottom();" title="Scroll to Bottom">&#9660; Bottom &#9660;</a>

Ein Bild sagt mehr als tausend Worte:

Der Schlüssel ist:

document.documentElement.scrollTo({
  left: 0,
  top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
  behavior: 'smooth'
});

Es wird verwendet document.documentElement, welches das <html>Element ist. Es ist wie mit window, aber es ist nur meine persönliche Präferenz es auf diese Weise zu tun, denn wenn es nicht die ganze Seite ist nur ein Container, funktioniert es einfach so , außer Sie würden ändern document.bodyund document.documentElementzu document.querySelector("#container-id").

Beispiel:

let cLines = 0;

let timerID = setInterval(function() {
  let elSomeContent = document.createElement("div");

  if (++cLines > 33) {
    clearInterval(timerID);
    elSomeContent.innerText = "That's all folks!";
  } else {
    elSomeContent.innerText = new Date().toLocaleDateString("en", {
      dateStyle: "long",
      timeStyle: "medium"
    });
  }
  document.body.appendChild(elSomeContent);

  document.documentElement.scrollTo({
    left: 0,
    top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
    behavior: 'smooth'
  });

}, 1000);

body {
  font: 27px Arial, sans-serif;
  background: #ffc;
  color: #333;
}

Sie können den Unterschied vergleichen, wenn es keine gibt scrollTo():

let cLines = 0;

let timerID = setInterval(function() {
  let elSomeContent = document.createElement("div");

  if (++cLines > 33) {
    clearInterval(timerID);
    elSomeContent.innerText = "That's all folks!";
  } else {
    elSomeContent.innerText = new Date().toLocaleDateString("en", {
      dateStyle: "long",
      timeStyle: "medium"
    });
  }
  document.body.appendChild(elSomeContent);

}, 1000);

body {
  font: 27px Arial, sans-serif;
  background: #ffc;
  color: #333;
}

Ein einfacher Weg, wenn Sie ein bestimmtes Element nach unten scrollen möchten

Rufen Sie diese Funktion auf, wenn Sie nach unten scrollen möchten.

function scrollDown() {
 document.getElementById('scroll').scrollTop =  document.getElementById('scroll').scrollHeight
}

ul{
 height: 100px;
 width: 200px;
 overflow-y: scroll;
 border: 1px solid #000;
}

<ul id='scroll'>
<li>Top Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Bottom Here</li>
<li style="color: red">Bottom Here</li>
</ul>

<br />

<button onclick='scrollDown()'>Scroll Down</button>

getDocHeight: function() {
  var D = document;
  return Math.max(
    D.body.scrollHeight,
    D.documentElement.scrollHeight,
    D.body.offsetHeight,
    D.documentElement.offsetHeight,
    D.body.clientHeight,
    D.documentElement.clientHeight
  );
}

document.body.scrollTop = document.documentElement.scrollTop = this.getDocHeight();

window.scrollTo (0,1e10);

funktioniert immer.

1e10 ist eine große Zahl. Es ist also immer das Ende der Seite.

Wenn jemand nach Angular sucht

Sie müssen nur nach unten scrollen und dies Ihrem Div hinzufügen

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

   <div class="my-list" #scrollMe [scrollTop]="scrollMe.scrollHeight">
   </div>