web-dev-qa-db-fra.com

Défilement automatique jusqu'au bas de la page

Considérez que j'ai une liste de questions. Lorsque je clique sur la première question, cela me ramène automatiquement au bas de la page. 

En fait, je sais que cela peut être fait avec jQuery. 

Alors, pourriez-vous me fournir de la documentation ou des liens permettant de trouver une réponse à cette question?

EDIT: Besoin de faire défiler jusqu'à un élément HTML particulier au bas de la page

javascriptjquery
291
jat

jQuery n'est pas nécessaire. La plupart des meilleurs résultats que j'ai obtenus d'une recherche Google m'ont donné cette réponse:

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

Lorsque vous avez des éléments imbriqués, le document peut ne pas défiler. Dans ce cas, vous devez cibler l'élément qui fait défiler et utiliser plutôt sa hauteur de défilement.

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

Vous pouvez associer cela à l'événement onclick de votre question (c'est-à-dire <div onclick="ScrollToBottom()" ...).

Quelques sources supplémentaires que vous pouvez consulter:

686
Zhihao

Si vous souhaitez faire défiler la page entière vers le bas:

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

Voir le sample sur JSFiddle

Si vous souhaitez faire défiler un élément vers le bas:

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

Et c'est comme ça que ça marche:

 enter image description here

Réf: scrollTop , scrollHeight , clientHeight

UPDATE: Les dernières versions de Chrome (61+) et Firefox ne permettent pas le défilement du corps, voir: https://dev.opera.com/articles/fixing-the-scrolltop-bug/

72
Tho

Implémentation JS vanille:

element.scrollIntoView(false);

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

39
shmuli

Vous pouvez l'utiliser pour descendre la page dans un format d'animation.

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

Ci-dessous devrait être la solution multi-navigateur. Il a été testé sur Chrome, Firefox, Safari et IE11

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

window.scrollTo (0, document.body.scrollHeight); ne fonctionne pas sur Firefox, du moins sur Firefox 37.0.2

15
PixelsTech

Vous pouvez utiliser cette fonction partout où vous devez l'appeler:

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

}

jquery.com: ScrollTo

12
NrNazifi

vous pouvez le faire aussi avec animation, c'est très simple 

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

l'espoir aide, merci

10
Ricardo Vieira

Parfois, la page s'étend en faisant défiler jusqu'au bout (par exemple dans les réseaux sociaux), pour faire défiler jusqu'à la fin (bout en bout de la page) J'utilise ce script:

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

Et si vous êtes dans la console javascript du navigateur, il peut être utile de pouvoir arrêter le défilement, ajoutez donc:

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

Et utilisez ensuite stopScroll();.

Si vous avez besoin de faire défiler jusqu'à un élément particulier, utilisez:

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

Ou script universel pour le défilement automatique sur un élément spécifique (ou pour arrêter l'intervalle de défilement de page):

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

Vous pouvez essayer Gentle Anchors un plugin JavaScript sympa.

Exemple:

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

Compatibilité Testé sur:

  • Mac Firefox, Safari, Opera
  • Windows Firefox, Opera, Safari, Internet Explorer 5.55+
  • Linux non testé mais devrait fonctionner avec Firefox au moins
4
Ahsan Khurshid

Vous pouvez attacher n'importe quel id à l'attribut de référence href de l'élément link:

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

Dans l'exemple ci-dessus, lorsque l'utilisateur clique sur Click me au bas de la page, la navigation lui permet d'accéder à Click me.

3
RegarBoy

Voici ma solution:

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

En retard pour la fête, mais voici quelques codes javascript simples pour faire défiler n'importe quel élément en bas:

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

Pour faire défiler dans Selenium, utilisez le code ci-dessous:

Jusqu'au bas de la liste déroulante, faites défiler jusqu'à la hauteur de la page ..__ Utilisez le code javascript ci-dessous qui fonctionnerait correctement en JavaScript et en réaction.

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

Un moyen très simple

Appelez cette fonction chaque fois que vous souhaitez faire défiler l'écran.

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>

1
Liam

Autant de réponses tentant de calculer la hauteur du document. Mais ça ne calculait pas correctement pour moi. Cependant, ces deux ont fonctionné:

jquery

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

ou juste js

    window.scrollTo(0,9999);
1
Andrew
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();
0
amachree tamunoemi