ScrollTo() in Javascript scrolls all down

Question

In my HTML Document I've got a input field. You can give in a number and the window should scroll down to this pixel number.

I've used the scrollTo() function. The thing is, that it always scrolls to the bottom of the page.

If I type window.scrollTo(0, 500 + 400); it works fine, but with window.scrollTo(0, document.getElementById("field").value + 400); it always scrolls all the way down.

You can see the problem in this fiddle: https://jsfiddle.net/ultraphilipp/eusq986j/

Thanks for your help! :)

Answer 1

There are 2 problems:

First you're using the wrong field ID. Use 'depth' instead.

The second problem is that

document.getElementById("depth").value

returns a string

Let's say you input the number 5.

What it does, is "5" + 400 = 5400

To fix this, you have to convert the value to an integer

window.scrollTo(0, parseInt(document.getElementById("depth").value) + 400);

Should fix your problem.

Answer 2

You've used wrong field ID, instead of field you have to use depth . Check correct code below:

window.scrollTo(0, document.getElementById("depth").value + 400);