Scroll to element without using JQuery

Question

I'm trying to scroll the page so a specific input that is in a area outside the landing screen can be visible. Something like this :

document.getElementById('my-input').scrollTo();

All examples i've seen in SO uses JQuery, but i want to do it with pure JS... How can i ?

Thanks !

The .scrollIntoView API isn't standard but it's widely supported. Of course, that's not "pure JS" either because it's a browser API and not part of the language. — Pointy
– Pointy, Commented Jun 5, 2018 at 13:25

baao · Accepted Answer · 2018-06-05 13:31:30Z

2

You can either use the non standardized (but well supported) scrollIntoView() method:

document.getElementById('bar').scrollIntoView();

.foo {
  height: 5000px;
  background: red;
}

#bar {
  height: 1000px;
  background: yellow;
}

<div class="foo"></div>
<div id="bar"></div>

Or you can use scrollTo(), taking the element's top as y coordinate.

window.scrollTo(0, document.getElementById('bar').getBoundingClientRect().top);

.foo {
  height: 5000px;
  background: red;
}

#bar {
  height: 1000px;
  background: yellow;
}

<div class="foo"></div>
<div id="bar"></div>

answered Jun 5, 2018 at 13:31

baao

73.6k18 gold badges152 silver badges209 bronze badges

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

1 Comment

@Marie no problem. It was the first time I've heard about that, so it was still interesting to read about it... :-)

Alex · Accepted Answer · 2018-06-05 13:32:27Z

2

You can use anchors to scroll to a specific ID if that helps you in any single way.

div {
  height: 200px;
  margin-bottom: 300px;
  border: 1px solid;
}

<a href="#b">Press Me</a>
<br><br>
<div id="a">
A
</div>

<div id="b">
B
</div>

<div id="c">
C
</div>

<div id="d">
D
</div>

answered Jun 5, 2018 at 13:32

Alex

2,2321 gold badge12 silver badges28 bronze badges