Can't get coordinates of html element

Question

I tried to get the coordinates of Block-1 and scroll the page to it, but I did something wrong =( How to get the html coordinates of the Block-1 element and scroll the page to it?

let elem = document.querySelector('.Block-1');
let coords = elem.getBoundingClientRect();
elem.style.top = coords.bottom + 'px';


window.scrollTo({
  top: elem,
  behavior: "smooth"
});

.Block-1 {
  margin-top: 500px;
  border: 1px solid black;
  font-size: 30px;
  padding: 50px;
}

<div class="Block-1">

  Scroll here

</div>

`scrollTo( { top: elem } )` <-- `elem` is not a `number`. I think you want `top: coords.top`. — Dai, Apr 12 '22 at 13:55
@alderman - it's more complicated than can be explained in a comment, but if you search "how to use Chrome debugger" (or your browser of choice) I'm sure you'll find several tutorials. — Alexander Nied, Apr 12 '22 at 13:58
Does this answer your question? [How do I scroll to an element using JavaScript?](https://stackoverflow.com/questions/5007530/how-do-i-scroll-to-an-element-using-javascript) — DarkBee, Apr 12 '22 at 14:13

score 1 · Accepted Answer · answered Apr 12 '22 at 15:21

You where on the right track. The top property of the scrollTo() is the top property of the getBoundingClientRect(). So, top: coords.top.

let elem = document.querySelector('.Block-1:nth-child(2)');
let coords = elem.getBoundingClientRect();

window.scrollTo({
  top: coords.top,
  behavior: "smooth"
});

.Block-1 {
  margin-top: 500px;
  border: 1px solid black;
  font-size: 30px;
  padding: 50px;
}

<div class="Block-1">

  Not here

</div>

<div class="Block-1">

  Scroll here

</div>

<div class="Block-1">

  Not here

</div>

Can't get coordinates of html element

1 Answers1