Automatisch naar de onderkant van de pagina scrollen

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>

Antwoord 11

Zoveel antwoorden die proberen de hoogte van het document te berekenen. Maar het rekende me niet goed. Beiden werkten echter:

jquery

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

of gewoon js

   window.scrollTo(0,9999);

Antwoord 12

U kunt elke idtoevoegen aan referentiekenmerk hrefvan linkelement:

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

In het bovenstaande voorbeeld, wanneer de gebruiker op Click meonderaan de pagina klikt, navigeert de navigatie naar Click mezelf.

Antwoord 13

Je kunt Gentle Anchorseen mooie javascript-plug-in proberen .

Voorbeeld:

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

Compatibiliteit getest op:

• Mac Firefox, Safari, Opera
• Windows Firefox, Opera, Safari, Internet Explorer 5.55+
• Linux niet getest, maar zou in ieder geval in orde moeten zijn met Firefox

Antwoord 14

Laat op het feest, maar hier is een simpele Javascript-code om elkelement naar beneden te scrollen:

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

Antwoord 15

Gebruik onderstaande code om naar beneden te scrollen in Selenium:

Tot de onderste drop-down, scroll tot de hoogte van de pagina.
Gebruik de onderstaande javascript-code die goed zou werken in zowel JavaScript als React.

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

Antwoord 16

Hier is mijn oplossing:

//**** 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)

Antwoord 17

Ik heb een Angular-app met dynamische inhoud en ik heb verschillende van de bovenstaande antwoorden geprobeerd zonder veel succes. Ik heb het antwoord van @Konard aangepast en het in gewone JS laten werken voor mijn scenario:

HTML

<div id="app">
    <button onClick="scrollToBottom()">Scroll to Bottom</button>
    <div class="row">
        <div class="col-md-4">
            <br>
            <h4>Details for Customer 1</h4>
            <hr>
            <!-- sequence Id -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="ID">
            </div>
            <!-- name -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Name">
            </div>
            <!-- description -->
            <div class="form-group">
                <textarea type="text" style="min-height: 100px" placeholder="Description" ></textarea>
            </div>
            <!-- address -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Address">
            </div>
            <!-- postcode -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Postcode">
            </div>
            <!-- Image -->
            <div class="form-group">
                <img style="width: 100%; height: 300px;">
                <div class="custom-file mt-3">
                    <label class="custom-file-label">{{'Choose file...'}}</label>
                </div>
            </div>
            <!-- Delete button -->
            <div class="form-group">
                <hr>
                <div class="row">
                    <div class="col">
                        <button class="btn btn-success btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to save">Save</button>
                        <button class="btn btn-success btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to update">Update</button>
                    </div>
                    <div class="col">
                        <button class="btn btn-danger btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to remove">Remove</button>
                    </div>
                </div>
                <hr>
            </div>
        </div>
    </div>
</div>

CSS

body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
}
#app {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
}

JS

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

Getest in de nieuwste Chrome-, FF-, Edge- en stock-Android-browser. Hier is een viool:

https://jsfiddle.net/cbruen1/18cta9gd/16/

Antwoord 18

Ik heb een truc gevonden om het voor elkaar te krijgen.

Zet een tekst van het invoertype onderaan de pagina en roep er een jQuery-focus op wanneer je maar wilt onderaan.

Maak het alleen-lezen en mooie css om de rand en achtergrond te wissen.

Antwoord 19

Hier is een methode die voor mij werkte:

Verwachte uitkomst:

• Geen scroll-animatie
• Laadt onderaan de pagina bij de eerste keer laden
• Laadt onderaan de pagina voor alle vernieuwingen

Code:

<script>
    function scrollToBottom() {
        window.scrollTo(0, document.body.scrollHeight);
    }
    history.scrollRestoration = "manual";
    window.onload = scrollToBottom;
</script>

Waarom dit mogelijk werkt boven andere methoden:

Browsers zoals Chrome hebben een ingebouwde voorinstelling om na het vernieuwen te onthouden waar u zich op de pagina bevond. Alleen een window.onloadwerkt niet omdat uw browser u automatisch terug zal scrollen naar waar u was voordat u ververst, NADAT u een regel hebt aangeroepen zoals:

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

Daarom moeten we toevoegen:

history.scrollRestoration = "manual";

vóór de window.onloadom die ingebouwde functie eerst uit te schakelen.

Referenties:

Documentatie voor window.onload: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

Documentatie voor window.scrollTo: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

Documentatie voor history.scrollRestoration: https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

Antwoord 20

Dit zal gegarandeerd naar beneden scrollen

Hoofdcodes

<script src="https://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>

Lichaamscode

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

Antwoord 21

Ik heb hetzelfde probleem gehad. Voor mij waren op een bepaald moment de elementen van de div niet volledig geladen en werd de eigenschap scrollTop geïnitialiseerd met de huidige waarde van scrollHeight, wat niet de juiste eindwaarde van scrollHeight was.

Mijn project is in Angular 8 en wat ik deed was:

1. Ik heb viewchild gebruikt om het element in mijn .ts-bestand te verkrijgen.
2. Ik heb de AfterViewChecked-gebeurtenis geërfd en daarin een regel code geplaatst waarin staat dat het viewchild-element in de scrollTop-waarde de waarde van scrollHeight moet opnemen (this.viewChildElement.nativeElement.scrollTop = this.viewChildElement.nativeElement. scrollHeight;)

De AfterViewChecked-gebeurtenis wordt een paar keer geactiveerd en krijgt uiteindelijk de juiste waarde van scrollHeight.

Antwoord 22

window.scrollTo(0,1e10);

werkt altijd.

1e10 is een groot getal. dus het is altijd het einde van de pagina.

Antwoord 23

Als iemand op zoek is naar Angular

je hoeft alleen maar naar beneden te scrollen om dit aan je div toe te voegen

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

Antwoord 24

Een foto zegt meer dan duizend woorden:

De sleutel is:

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

Het gebruikt document.documentElement, wat het <html>element is. Het is net als het gebruik van window, maar het is gewoon mijn persoonlijke voorkeur om het op deze manier te doen, want als het niet de hele pagina is maar een container, werkt het precies zo, behalve dat je document.bodyen document.documentElementnaar document.querySelector("#container-id").

Voorbeeld:

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