Desplazarse automáticamente a la parte inferior de la página

Considere que tengo una lista de preguntas. Cuando hago clic en la primera pregunta, debería llevarme automáticamente al final de la página.

De hecho, sé que esto se puede hacer usando jQuery.

Entonces, ¿podría proporcionarme alguna documentación o algunos enlaces donde pueda encontrar la respuesta a esta pregunta?

EDITAR: necesita desplazarse a un elemento HTML en particular en la parte inferior de la página

jQuery no es necesario. La mayoría de los mejores resultados que obtuve de una búsqueda en Google me dieron esta respuesta:

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

Donde haya elementos anidados, es posible que el documento no se desplace. En este caso, debe apuntar al elemento que se desplaza y usar su altura de desplazamiento.

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

Puede vincular eso con el onclickevento de su pregunta (es decir <div onclick="ScrollToBottom()" ...).

Algunas fuentes adicionales que puede consultar:

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

Si desea desplazarse por toda la página hacia abajo:

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

Ver la muestra en JSFiddle

Si desea desplazar un elemento hacia abajo:

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

Y así es como funciona:

Ref: scrollTop , scrollHeight , clientHeight

ACTUALIZACIÓN: las últimas versiones de Chrome (61+) y Firefox no admiten el desplazamiento del cuerpo, consulte: https://dev.opera.com/articles/fixing-the-scrolltop-bug/

Implementación de Vanilla JS:

element.scrollIntoView(false);

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

Puede usar esto para bajar la página en un formato de animación.

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

A continuación debe ser la solución de navegador cruzado. Ha sido probado en Chrome, Firefox, Safari e IE11

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

window.scrollTo (0, document.body.scrollHeight); no funciona en Firefox, al menos para Firefox 37.0.2

A veces, la página se extiende al desplazarse hasta el botón (por ejemplo, en las redes sociales), para desplazarse hacia abajo hasta el final (botón final de la página).

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

Y si está en la consola de JavaScript del navegador, puede ser útil poder detener el desplazamiento, por lo tanto, agregue:

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

Y luego usar stopScroll();.

Si necesita desplazarse a un elemento en particular, use:

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

O script universal para el desplazamiento automático a un elemento específico (o detener el intervalo de desplazamiento de la página):

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

Puede usar esta función donde necesite llamarla:

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

}

jquery.com: ScrollTo

puedes hacer esto también con animación, es muy simple

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

la esperanza ayuda, gracias

un forro para desplazarse suavemente hacia abajo

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

Para desplazarse hacia arriba basta con establecer topa0

Puede adjuntar cualquiera idal atributo hrefde referencia del elemento de enlace:

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

En el ejemplo anterior, cuando el usuario hace clic Click meen la parte inferior de la página, la navegación se desplaza hacia Click mesí misma.

Puede probar Gentle Anchors, un buen complemento de JavaScript.

Ejemplo:

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

Compatibilidad probada en:

• Mac Firefox, Safari, Opera
• Windows Firefox, Opera, Safari, Internet Explorer 5.55+
• Linux no probado pero debería estar bien con Firefox al menos

Tarde a la fiesta, pero aquí hay un código simple solo de JavaScript para desplazar cualquier elemento hacia abajo:

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

Para desplazarse hacia abajo en Selenium, use el siguiente código:

Hasta la parte inferior desplegable, desplácese hasta la altura de la página. Utilice el siguiente código de JavaScript que funcionaría bien tanto en JavaScript como en React.

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

Tantas respuestas tratando de calcular la altura del documento. Pero no estaba calculando correctamente para mí. Sin embargo, ambos funcionaron:

jquery

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

o solo js

    window.scrollTo(0,9999);

Aquí está mi solución:

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

Esto garantizará el desplazamiento hacia abajo

Códigos principales

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

Código del cuerpo

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

Una imagen vale mas que mil palabras:

La clave es:

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

Está usando document.documentElement, que es el <html>elemento. Es como si se utilizara window, pero es sólo mi preferencia personal para hacerlo de esta manera, porque si no es toda la página, pero un recipiente, funciona igual que este, excepto que le cambie document.bodyy document.documentElementpara document.querySelector("#container-id").

Ejemplo:

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

Puede comparar la diferencia si no hay 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;
}

Una manera simple si desea desplazarse hacia abajo elemento específico

Llame a esta función cuando quiera desplazarse hacia abajo.

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>

Tengo una aplicación Angular con contenido dinámico y probé varias de las respuestas anteriores sin mucho éxito. Adapte la respuesta de @ Konard y lo hice funcionar en JS para mi escenario:

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

Probado en el último navegador Chrome, FF, Edge y Android. Aquí hay un violín:

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

siempre funciona

1e10 es un gran número. así que siempre es el final de la página.

Si alguien busca Angular

solo necesita desplazarse hacia abajo, agregar esto a su div

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

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