By clicking the scroll down button to the end of the div

Question

I have a div which is actually a Bootstrap 4 modal. What I want is that when the user clicks the button, the scroll descends to the end of this div, so that the alertSuccess() message is displayed correctly to the user. Until the moment when the user clicks on the button, the modal covers the success message, which is fixed at the bottom of the screen. That’s why I need the page to go down. I would like to do this with javascript.

 <form method="post" action="recebeDados.php" class="form_comment" id="form_comment<?= $row['product_id'] ?>" name="<?= $row['product_id'] ?>">
        <h2 class="text-center text-muted" style="font-size: 18px;">Deixe um comentário:</h2>
      <div class="form-group">
        <input class="form-control" type="name" name="nome" id="nome" value="<?= $_SESSION['nome'] ?>">
      </div>
      <div class="form-group">
        <textarea class="form-control" type="comentario" name="comentario" id="comentario" placeholder="Digite aqui seu comentário" required></textarea>
      </div>
      <input class="form-control" type="hidden" value="<?= $_SESSION['id_usuario'] ?>" id="id_usuario" name="id_usuario">
      <input class="form-control" type="hidden" value="<?= $row['product_id'] ?>" id="product_id" name="product_id">
      <div class="form-group">
        <input type="submit" onclick="alertSuccess()" class="btn btn-info mx-0 mx-auto text-center" name="submit" value="Comentar"> <!--- BOTÃO -->
      </div>
  </form>


<script type="text/javascript" language="Javascript">
      function alertSuccess()
      {
               const Toast = Swal.mixin({
  toast: true,
  position: 'bottom',
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true,
  onOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
  }
})

Toast.fire({
  icon: 'success',
  title: 'Signed in successfully'
})
      }
      
  </script>
  

Answer 1

To scroll the page you can use the methods scrollBy() and scrollIntoView().

The scrollBy(x, y) is a method that takes as parameter the position X and Y from where you want to scroll the page. So, just get the position of your div and go down using this method, see the example below:

window.scrollBy(800, 1300);  // Rola até a posição X: 800 Y: 1300

Already the method scrollIntoView() takes an element as argument, causing the page to scroll to this element. See this example below:

element = document.getElementsByTagName("h1")[0];
element.scrollIntoView();

Answer 2

The Sweetalert box should normally appear above the modal, since it is created at the end of the body, as shown in the print below:

If in your case the alert is getting below the modal, it may be that something in your CSS is causing this.

To solve the problem you do not need to resort to what you are doing, fixing the alert at the bottom of the screen to then make a scroll. That’s not the best idea, as far as I’m concerned.

You might as well leave the centralized alert by changing the value of the position: 'bottom' for position: 'center' in the alert settings and put a z-index with a value high enough for the alert to be above the modal.

The alert box has the class .swal2-container (whereas you are using version 2 of the component), so just put it in your CSS:

.swal2-container{
   z-index: 99999 !important;
}

Note that I put a high value of 99999 which may already be sufficient, and the !important is to override the CSS that the component injects into the page.