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

Hi. Welcome to SO! Please visit How to Ask. Do some research, search for related topics on SO; if you get stuck, post a minimal reproducible example of your attempt, noting input and expected output, preferably in a Stacksnippet — Alexandre Elshobokshy
– Alexandre Elshobokshy, Commented Sep 7, 2021 at 7:07
Try to run the code after some timeout after adding the 'd-block' class to element. the code ran before the element actually loaded into the dom — Vijay Kumawat
– Vijay Kumawat, Commented Sep 7, 2021 at 7:08
Does this answer your question? How do I scroll to an element using JavaScript? — mocha
– mocha, Commented Sep 7, 2021 at 7:12
Take a look at this issue: stackoverflow.com/questions/5007530/… — mocha
– mocha, Commented Sep 7, 2021 at 7:12
@VijayKumawat thanks for that. Setting a timeout worked for me, but currently the wait length is hardcoded. How can I make it such that the timeout will wait until the element is loaded in the dom? — Kabir Pathak
– Kabir Pathak, Commented Sep 7, 2021 at 7:56

Gass · Accepted Answer · 2021-10-20 08:15:02Z

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

edited Oct 20, 2021 at 8:15

answered Sep 7, 2021 at 9:35

Gass

9,6405 gold badges47 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to scroll to an element using Javascript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related