Comment puis-je faire défiler automatiquement vers le bas de la page après l'effondrement?

Question

J'ai cet élément qui utilise l'effondrement bootstrap. Lorsque je clique sur "en-tête" de cet élément, il s'ouvre et une barre de défilement apparaît mais j'aime apparaître en bas.

J'essaye beaucoup de solution de stackoverflow, mais aucune ne semble fonctionner. Je peux le faire?

<div class="row"> 
    <div class="col-sm-12"> 
     <div id="panel-profil" class="panel panel-info"> 
      <div id="panel-heading-profil" class="panel-heading text-center"> 
       <a id="link-heading-profil" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" 
        aria-expanded="false" aria-controls="collapseTwo" onclick="changeArrowProfil()"> 
        <div class="row"> 
         <div id="triangleUn" class="col-sm-1"> 
          <span id="triangle1" class="glyphicon glyphicon-triangle-bottom"></span> 
         </div> 
         <div class="col-sm-10"> 
          <span class="fa fa-truck fa-1"></span> Profil du véhicule 

         </div> 
         <div id="triangleDeux" class="col-sm-1"> 
          <span id="triangle2" class="glyphicon glyphicon-triangle-bottom"></span> 
         </div> 
        </div> 
       </a> 
      </div> 
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
       <div id="panel-body-profil" class="panel-body"> 
        <label class="text-info" for="sel1">Longueur du véhicule :</label> 
        <form class="form-horizontal"> 
         <div class="form-group form-group-sm"> 
          <div class="col-sm-1"><img src="../img/B10a.png" height="35" width="35" ></img></div> 
          <input class="col-sm-2 control-label inputConstraint" 
            for="formGroupInputSmall" type="text" value="6.00 m" autocomplete="off" id="value_length" readonly/> 
          <div class="col-sm-8 sliderConstraint" 
           for="formGroupInputSmall"> 
           <input type="range" min="0" step="1" max="3" value="0" 
             id="value_length_slide" 
             onchange="changeValue('length')" /> 
          </div> 
         </div> 
        </form> 
        ... 
        ... 
       </div> 
       <div class="row" id="valid-param"> 
        <div class="col-sm-12"> 
         <button id="btn-valid-param" onclick="modifierProfileSaisi();" type="submit" class="btn btn-success btn-sm btn-block" > Valider les paramètres</button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

Answer 1

si vous utilisez un événement onClick, puis dans ce onClick, écrire cette ligne de code,

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

Cela vous faites défiler jusqu'au bas de la page.