Scorri automaticamente fino alla parte inferiore della pagina

Considera che ho un elenco di domande. Quando clicco sulla prima domanda, dovrebbe portarmi automaticamente in fondo alla pagina.

In effetti, so che questo può essere fatto usando jQuery.

Quindi, potresti fornirmi della documentazione o dei link in cui posso trovare una risposta a questa domanda?

EDIT: è necessario scorrere fino a un particolare elemento HTML nella parte inferiore della pagina

jQuery non è necessario. La maggior parte dei risultati migliori ottenuti da una ricerca su Google mi ha dato questa risposta:

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

Dove sono presenti elementi nidificati, il documento potrebbe non scorrere. In questo caso, devi scegliere come target l'elemento che scorre e utilizzare invece l'altezza di scorrimento.

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

Puoi legarlo onclickall'evento della tua domanda (es <div onclick="ScrollToBottom()" ....).

Alcune fonti aggiuntive puoi dare un'occhiata a:

• 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/

Se vuoi scorrere l'intera pagina verso il basso:

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

Vedi l' esempio su JSFiddle

Se vuoi scorrere un elemento verso il basso:

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

Ed è così che funziona:

Rif: scrollTop , scrollHeight , clientHeight

AGGIORNAMENTO: Le ultime versioni di Chrome (61+) e Firefox non supportano lo scorrimento del corpo, consultare: https://dev.opera.com/articles/fixing-the-scrolltop-bug/

Implementazione di Vanilla JS:

element.scrollIntoView(false);

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

Puoi usarlo per andare in fondo alla pagina in un formato di animazione.

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

Di seguito dovrebbe essere la soluzione cross browser. È stato testato su Chrome, Firefox, Safari e IE11

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

window.scrollTo (0, document.body.scrollHeight); non funziona su Firefox, almeno per Firefox 37.0.2

A volte la pagina si estende su scroll to buttom (ad esempio nei social network), per scorrere fino alla fine (buttom finale della pagina) uso questo script:

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

E se ti trovi nella console javascript del browser, potrebbe essere utile essere in grado di interrompere lo scorrimento, quindi aggiungi:

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

E poi usa stopScroll();.

Se è necessario scorrere fino a un elemento particolare, utilizzare:

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

O uno script universale per lo scorrimento automatico di elementi specifici (o l'intervallo di scorrimento della pagina di arresto):

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

È possibile utilizzare questa funzione ovunque sia necessario chiamarla:

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

}

jquery.com: ScrollTo

puoi farlo anche con l'animazione, è molto semplice

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

la speranza aiuta, grazie

una fodera per scorrere uniformemente verso il basso

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

Per scorrere verso l'alto basta impostare topsu0

È possibile allegare qualsiasi idattributo hrefdi riferimento dell'elemento link:

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

Nell'esempio sopra quando l'utente fa clic Click menella parte inferiore della pagina, la navigazione passa a Click mese stessa.

Puoi provare Gentle Anchors un bel plugin javascript.

Esempio:

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

Compatibilità testata su:

• Mac Firefox, Safari, Opera
• Windows Firefox, Opera, Safari, Internet Explorer 5.55+
• Linux non testato, ma dovrebbe andare bene almeno con Firefox

In ritardo alla festa, ma ecco un semplice codice solo javascript per scorrere qualsiasi elemento verso il basso:

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

Per scorrere verso il basso in Selenio utilizzare il codice seguente:

Fino all'ultima discesa, scorrere fino all'altezza della pagina. Usa il seguente codice javascript che funzionerebbe bene sia in JavaScript che in React.

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

Tante risposte cercando di calcolare l'altezza del documento. Ma non stava calcolando correttamente per me. Tuttavia, entrambi hanno funzionato:

jquery

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

o solo js

    window.scrollTo(0,9999);

Ecco la mia soluzione:

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

Questo garantirà lo scorrimento verso il basso

Codici di testa

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

Codice del corpo

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

Un'immagine vale più di mille parole:

La chiave è:

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

Sta usando document.documentElement, che è l' <html>elemento. E 'come usare window, ma è solo la mia preferenza personale a fare in questo modo, perché se non è l'intera pagina, ma un contenitore, funziona proprio come questo, tranne che ci si cambia document.bodye document.documentElemental document.querySelector("#container-id").

Esempio:

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

Puoi confrontare la differenza se non c'è 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;
}

Un modo semplice se si desidera scorrere verso il basso l'elemento specifico

Chiamare questa funzione ogni volta che si desidera scorrere verso il basso.

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>

Ho un'app Angular con contenuti dinamici e ho provato diverse delle risposte sopra senza molto successo. Ho adattato la risposta di @ Konard e l'ho fatta funzionare in modo semplice per il mio 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);
}

Testato sugli ultimi browser Android Chrome, FF, Edge e stock. Ecco un violino:

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

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

funziona sempre.

1e10 è un numero elevato. quindi è sempre la fine della pagina.

Se qualcuno cerca Angular

devi solo scorrere verso il basso aggiungere questo al tuo div

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

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