Scroll to element on the page without jquery (Vanilla Javascript)

Question

I'm aware there are many similar questions, but! They all seem to be from 2010 - 2013 and require the use of jQuery which I want to avoid.

Is there an easy way using Javascript to scroll to an element with a certain id and control where it lands?

I have tried to use scrollIntoView() but I was unable to get it to land where I wanted it. Even with the extra configuration detailed here. Is there a more precise way of doing it??

I have tried

document.getElementById('6QWsZnqyuAKke20CgG4WIQ')
  .scrollIntoView({'every different config option'});

Usually what happens is it would scroll to far or not enough, never exactly where I want it. I have also checked the browser compatibility and the options are not available in certain browsers. Is there a more precise way of doing it??

Thanks

Show the code you tried, and expand on "couldn't get it to land where I wanted", does that mean it went to far, didn't go far enough, didn't do anything? — Patrick Evans
– Patrick Evans, Commented Mar 8, 2018 at 4:04
I haven't tried, but potentially you can get the distance from the top for the element that you want to scroll to, using scrollTop, and then pass it to window.scroll. — Rafael Rozon
– Rafael Rozon, Commented Mar 8, 2018 at 4:08

saltchicken · Accepted Answer · 2018-03-08 04:12:48Z

3

el = document.getElementById('your-el-id');
var rect = el.getBoundingClientRect();
window.scrollTo(rect.x, rect.y)

This code will position the element on top of the window. Simply modify the values in window.scrollTo() to get the desired position.

answered Mar 8, 2018 at 4:12

saltchicken

1809 bronze badges

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

4 Comments

Smokey Dawson Over a year ago

Im getting a linting error x and y does not exist on rect, are they meant to be numbers?

saltchicken Over a year ago

I am unsure why you would receive a linting error. Calling .x and .y will return the number for the x and y coordinates of the element's top left corner. What IDE are you using?

Smokey Dawson Over a year ago

Im writing this in an angular application so its a tslint error sorry that says [ts] Property 'x' does not exist on type ClientRec | DOMRect I will figure out how to fix it

saltchicken Over a year ago

Ah, Typescript. That is why. The code is valid javascript and will get the job done. I believe making this proper Typescript is outside the scope of this question.

Collectives™ on Stack Overflow

Scroll to element on the page without jquery (Vanilla Javascript)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related