How to scroll to an element using Javascript?

Question

I'm trying to scroll to a particular card when a button is clicked. I'm using scrollIntoView for that, but its not working.

.js file :

document.getElementById("general_details_edit").addEventListener("click", function(){
  this.style.display = "none";
  document.getElementById("general_details_card").classList.remove("d-none");
  document.getElementById("general_details_card").classList.add("d-block");

  console.log("start");
  document.getElementById("general_details_card").scrollIntoView({behavior : 'smooth'});
  console.log("end")
  //not working

All of the other javascript code is working. How can i resolve this? I get the console messages "start" and "end" as well.

Also, when i run the same line from browser's console, it works.

EDIT :

Vijay's comment about using a timeout worked for me. But how i can wait for the element to load instead of waiting for a specific amount of time?

Current code :

const scroll = (el) => {
  setTimeout(function () { el.scrollIntoView( {behavior : 'smooth', block : 'end'}); }, 500);
}

Answer 1

One way would be to change the waiting time to zero milliseconds once the DOM is fully loaded.

var mSeconds = 500;

window.addEventListener('DOMContentLoaded', function(event) {
  mSeconds = 0;
});

const scroll = (el) => {
  setTimeout(function () { 
    el.scrollIntoView( {behavior : 'smooth', block : 'end'});
  }, mSeconds);
  
}