Let's make it move in this lesson, we're going to make the content within our element moving up and
we already set up our interval.
So next, let's select our scroll speed so this can be whatever the speed is that we want to scroll
up so far right now, let's set it at ten and then we can update it with the input later on as well.
We need to record and use some of the values that are available within the elements, and we can use
those by getting the style top value.
So just as we're setting it up here, we can also get this value and we can pull that information back.
So if we do style top, you can see what gets output in the console.
So we get that PIC's value in.
In order to get rid of the PIC's value, we have to use the pass integer and that will turn that value
into a numeric value.
So now we've got back down to five, 93, and this is what we need to use in order to calculate how
far up that particular element is.
So as we loop through and we iterate through the intervals, we want to move the element up.
So taking that s element, we're going to take style top and we're going to increase that by the same
value that we've got over here.
And we can use this as a variable.
So taking our position, we can call it position y, we can get that value out.
This, again, is a numeric value.
We can see that we can use that within our console.
So taking that value, also adding our scroll speed to that and then adding our PEX value.
So let's see what happens and we refresh it.
And you can see that now we're decreasing or we're actually increasing the position.
So we actually need to do is we need to decrease the position.
So subtracting the scroll speed refresh and now you see that it's scrolling up, so scrolling up and
we need to have a way to catch it.
So as long as it's greater than zero, then we're still okay to scroll up.
So let's add in a condition so that we don't run off the page and we reset the starting position.
So taking our position y value and adding our S element, and this is where we're going to use the client
height value values the same one as before.
So we're taking these two values and we're checking to see if it's greater than zero.
And if it is, then we're still good to go to increase it.
And if it's not, then we're going to reset the position to be equal to whatever the client height is.
So that taking that value and we're taking the value of the client height.
And then again, adding in the pics so that we can set the property, so let's see what happens.
So now we see that it's scrolling up and when it reaches the top, it's going to start again from the
bottom.
We can also make that client area smaller for one or two as well.
So we could make it half of the height of one or two.
So refresh.
So now it's a little bit smaller there.
We could shrink that down and you can see that once it runs to the top, doesn't matter how much you
adjust the height of it, we're always going to be running to the top and then it's going to be resetting
just underneath the visible area.
And we can also output into our output area, so our output updating our inner HTML, and this is where
we can just output the scroll speed and also we can also include the Y position and then add in whatever
the value of position Y is currently.
So we'll get some values that are being output there so we can see that something is changing, constantly
changing.
And once we hit negative, whatever the value of the height is, then we reset and we go back to the
zero.
So go ahead and add this into your application.
Add in the calculations, try it out for yourself, try out working with the elements, updating the
element position, setting the style properties style top.
And remember that in order to set style top, we also might need to make sure that our position is absolute.
So that gives us the ability to move it around the page.
So go ahead and try this out for yourself.
And coming up next, I'll show you how you can adjust the scroll speed.