javascript - attribute - title css

Desplácese automáticamente hasta la parte inferior de la página

Question

Considero que tengo una lista de preguntas. Cuando hago clic en la primera pregunta, debería llevarme automáticamente a la parte inferior 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 respuesta a esta pregunta?

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

Answer 1

A veces, la página se extiende en scroll to buttom (por ejemplo, en redes sociales), para desplazarse hacia abajo hasta el final (tope final de la página). Utilizo este script:

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

Y si está en la consola javascript del navegador, puede ser útil poder detener el desplazamiento, así que agregue:

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

Y luego use stopScroll(); .

Si necesita desplazarse a un elemento en particular, use:

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

O el 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.body.scrollTop + window.innerHeight) != document.body.scrollHeight) { 
        // no element -> scrolling
        notChangedStepsCount = 0;
        document.body.scrollTop = document.body.scrollHeight;
    } else if (notChangedStepsCount > 20) { 
        // no more space to scroll
        clearInterval(scrollInterval);
    } else {
        // waiting for possible extension (autoload) of the page
        notChangedStepsCount++;
    }
}, 50);

Answer 2

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)

Answer 3

Debajo debe ser la solución de navegador cruzado. Se ha 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

Answer 4

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

Hasta que el menú desplegable de abajo, desplácese hasta la altura de la página. Utilice el siguiente código 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)", "");

Answer 5

Puede adjuntar cualquier id al atributo de referencia href del elemento de enlace:

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

En el ejemplo anterior, cuando el usuario hace Click me en Click me en la parte inferior de la página, la navegación navega a Click me mismo.

Answer 6

Puede probar Gentle Anchors un agradable 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 está probado, pero debería estar bien con Firefox al menos

Answer 7

Puedes hacerlo 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'');

espero ayuda gracias

Answer 8

Puedes usar esta función donde sea que necesites llamarla:

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

}

jquery.com: ScrollTo

Answer 9

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

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

Answer 10

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

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

Vea la muestra en JSFiddle

Si desea desplazar un elemento a la parte inferior:

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

Y así es como funciona:

JSFiddle

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/

Answer 11

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

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

Answer 12

Una forma muy sencilla

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>

Answer 13

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

Cuando tenga 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 en su lugar.

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

Puede vincularlo al evento onclick de su pregunta (es decir, <div onclick="ScrollToBottom()" ... ).

Algunas fuentes adicionales que puede echar un vistazo 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/

Answer 14

Implementación Vanilla JS:

element.scrollIntoView(false);

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

Answer 15

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