Faites défiler automatiquement vers le bas de la page

Considérez que j'ai une liste de questions. Lorsque je clique sur la première question, elle devrait automatiquement m'emmener au bas de la page.

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

Alors, pourriez-vous me fournir de la documentation ou des liens où je peux trouver la réponse à cette question?

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

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 défile et utiliser sa hauteur de défilement à la place.

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

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

Quelques sources supplémentaires que vous pouvez consulter:

• 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 vous souhaitez faire défiler la page entière vers le bas:

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

Voir l' exemple 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:

Réf: scrollTop , scrollHeight , clientHeight

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

Implémentation de Vanilla JS:

element.scrollIntoView(false);

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

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

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

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, au moins pour Firefox 37.0.2

Parfois, la page s'étend sur défilement jusqu'à buttom (par exemple dans les réseaux sociaux), pour faire défiler jusqu'à la fin (buttom ultime de la page) j'utilise ce script:

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

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

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

Et puis utilisez stopScroll();.

Si vous devez 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 vers un élément spécifique (ou l'intervalle de défilement de la page d'arrêt):

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

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

vous pouvez le faire aussi avec l'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

une doublure pour défiler en douceur vers le bas

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

Pour faire défiler vers le haut, réglez simplement topsur0

Vous pouvez attacher n'importe quel idattribut hrefde référence à l' élément de lien:

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

Dans l'exemple ci-dessus, lorsque l'utilisateur clique Click meen bas de la page, la navigation se dirige vers Click meelle-même.

Vous pouvez essayer Gentle Anchors un joli plugin javascript.

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ée sur:

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

Tard dans la soirée, mais voici un simple code javascript pour faire défiler n'importe quel élément vers le bas:

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

Pour faire défiler vers le bas dans le sélénium, utilisez le code ci-dessous:

Jusqu'à la liste déroulante du bas, faites défiler jusqu'à la hauteur de la page. Utilisez le code javascript ci-dessous qui fonctionnerait bien dans JavaScript et React.

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

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

jquery

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

ou juste js

    window.scrollTo(0,9999);

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)

Cela garantira un défilement vers le bas

Codes de tête

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

Code du corps

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

Une image vaut mieux que mille mots:

La clé est:

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

Il utilise document.documentElement, qui est l' <html>élément. C'est comme utiliser window, mais c'est juste ma préférence personnelle de le faire de cette façon, parce que si ce n'est pas la page entière mais un conteneur, cela fonctionne comme ceci, sauf que vous changez document.bodyet document.documentElementvers document.querySelector("#container-id").

Exemple:

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

Vous pouvez comparer la différence s'il n'y a pas 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 moyen simple si vous souhaitez faire défiler un élément spécifique

Appelez cette fonction chaque fois que vous souhaitez faire défiler vers le bas.

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>

J'ai une application Angular au contenu dynamique et j'ai essayé plusieurs des réponses ci-dessus avec peu de succès. J'ai adapté la réponse de @ Konard et l'ai fait fonctionner en clair JS pour mon scénario:

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

Testé sur les derniers navigateurs Android Chrome, FF, Edge et stock. Voici un violon:

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

fonctionne toujours.

1e10 est un grand nombre. donc c'est toujours la fin de la page.

Si quelqu'un recherche Angular

il vous suffit de faire défiler vers le bas ajouter ceci à votre div

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

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