jQuery scrollTop() Method

Hello guys! Welcome to our jQuery series. We'll continue with the previous segment in today's video. 

So, today's video is a continuation of the previous segment. Previously, what we saw we'll continue with that. 

After the clone method the second method is scrollTop method. By listening to the word scrollTop you might think that using this method we can scroll to the top but it isn't like that. 

ScrollTop basically returns the current position of the scroll bar. It means many times we see websites having scrollbar as web pages are long. 

Sometimes when we work with a web page it is necessary to know the current position of the scroll bar. Is it already at top or if not then where it is? At any point we want to know the position of the vertical scroll bar to know the position, so to know the position we use the scrollTop method. 

This is what is written here that “the jQuery scrollTop method is used to set or return the vertical scroll bar position for the selected elements” which means that either we can set the position or we can get the current position. 

“When the scroll bar is on top, it specifies the position as zero” meaning that when my scroll bar is at top that position is said to zero.

Let's say if I open the site of LearnVern,… you can see the scrollbar is currently at top. So, if I use the scrollTop method I'll get position zero because it is already at the top. 

If I take it somewhere near the center and use the scrollTop method it should return whatever the current position is. 

Hence, this is how we use scrollTop for current position. 

So let’s say I will like, now let's generate a program in which we make divisions and find the current position for the same. 

Before that there are some more details about scrollTop and what it does. 

“To return the position means when this method is used to return the position, it provides the current vertical position of the first matched element in the set. “

Meaning if I want to know where my current scrollbar is like you can see that my scrollbar is somewhere in between so if I want to know at which point it is for that I can use return current position scrollTop.

If I want my scrollbar set to a particular position then I have to set the position for it. We’ll see the program for the same.

So basically, we can perform two tasks: get the current scrollbar position and second, we can set the scrollbar position.

Basically the Syntax for the same is very simple. Selector and after that scrollTop then if we want to set, we will pass the value and if not then without parameters will keep.

We will see examples.

Here on button click I want to know the current position of scrollbar so for that I’ll use div dot scrollTop and I can use body as P well if I have a big webpage on that I’ll put scrollTop. PX here means string is passed which is in pixels.

On the above right most side,  where is the scrollbar and the value that will be passed will be returned in pixels. To know that we use scrollTop and it is in pixels so we can use PX.

Let’s say if I open sublime text,… then I’ll copy on HTML,… example… scrollTop. I’ll add my library and this is my script(5 seconds pause, typing)  style( 4 seconds pause, typing) . Here in the body, ….we’ll align text in the center. This is our format which we are using to know the program… example of ….scrollTop.

Now let’s say we have two things. First thing is to find where our scrollbar is. So, I’ll make a button click and here I will take ID BTN.

Here we are just taking a button…. Click… and give it an ID.

When my button is clicked, I should get to know the position of my scrollbar. So here document ….DOT ready ….function… dollar…. hashtag button…. dot…. click… function.

Hence, we have made two functions. When my document is ready and my button is clicked, it will return me my scrollbar position.

If I save this program ….using the name scrollTop and if I run this program… then you can see that my program is generated in such a way. 

You cannot see a vertical scrollbar in this program of mine, okay. So what I do is, I have to check that there is any scrollbar above the div. So if I have a div above which there is no scrollbar, I’ll write a line…. dollar body dot… scrollTop this is our body scrollTop meaning if inside the body there is scrollbar it’s position will be returned to us as we haven’t kept anything in parenthesis.

So what I can do is string , var STR equal to dollar body dot scrollTop means that the value of scrollTop is entered into string and then we’ll make it alert. Okay? Hence we’ll alert the scrollbar is (10 seconds pause, typing) in position.

Save and run the program. We’ll click and see that the scrollbar is at zero px position.

Because we have kept the scrollbar before the body tag. You can see here that if the scrollbar is inside the body, value  will be returned. But currently our scrollbar isn’t there due to which no value was returned.

 Because there is no scrollbar in the body, scrollTop returned us zero value which we have alerted. Let’s say if I give height to this body one thousand pixels. Reload.

As soon as I give one thousand pixels height to the body, you can see that the scroll bar is getting generated. So if I keep this scrollbar here and click then I get zero position and if I scroll down a bit such that button is visible otherwise we won’t be able to click.So I keep it like this and click on button.

Now I get that ‘scrollbar is at zero PX position’ that means we have moved the scrollbar but we still get the same value which means that the code which we wrote there is something wrong or there is a problem. We will fix that first so that we get proper value.

For that what we will do is, in our code we keep the scrollbar above the body. Because we kept the scrollbar above the body it moves to HTML rather than body in HTML tag means that outside our body the tag is there is HTML tag.

That’s why instead of body we’ll have to write HTML means inside html wherever the scrollbar is we’ll get the return position of scrollbar.

So, our mistake was we wrote here body and we have changed it to html. After saving it, if we run the program and on clicking, we get zero PX position because scroll is at top.

Now, I’ll slide it a little down and click then we see that “the scrollbar is at sixty-nine point seven one PX position” means that if I slide it down little then at whatever position is my scrollbar moved, I’ll get to see.

If my button moves again and again, then I’ll fix my button… . What we will do is button position… absolute bottom ten pixels… right ten pixels.

Now we’ll see where our button is moved. We can see that our button is moved at bottom and when I scroll up and down my button is still moving. So, position static. Reload.

Here I fixed my value. Let's do one thing: we'll fix the value of H one in the same way position fixed top …ten PX. Save. ….And margin zero auto. Reload.

Okay, now you can see that two things are fixed and our scrollbar is moving. So actually, we are moving up and down in the webpage but our heading and button is fixed at its position.

So let’s say if we keep it at top and click then we get zero PX. If we keep near the center and click then we get the returned value. If I go at the end and click, I’m getting the returned position.

Now here the position we get returned is the topmost position of the scrollbar as the height we kept is one thousand PX so the complete height of the webpage is one thousand PX. 

From down it is one thousand then the total height is based on the current position of the vertical scrollbar which is sixty-three four currently. We have fixed these two things.

That’s why at every moment we are able to get scrollTop results.

Now if I do one more thing in this that when I click the button I’m returned to the top.

Let’s say I copy this program and paste scrollTop to reach to top and now what will I do is. Rest of the things will be kept the same. Example of “scrollTop to reach to top”.

Now I’ll remove the height one thousand and add a div…. whose height is… three hundred pixels and name is div one will make it hashtag ID…, background color… light coral.

In the same way I’ll generate three or four divs: div one, div two, div three, div four each height is common and color light blue…., light cyan…., light green… respectively. Save.

And our program as of now we have fixed this button. Here we will place divs…... And each has an ID div one because you can see that the div is taken and place this at each ID two, three, four respectively and save the program.

Name of the program…. will be scrollTop underscore two. If I run this program, you can see the program in which few colors are visible.

I’ll zoom it a bit. We see colors, heading and buttons are static. Instead of three hundred height we will change it to two hundred so that it will look proper.

This is our colorful background, static heading and button.

Now what I have to do is the current position obtained when clicked instead of that I want to move the value at top.

For that what I’ll do is. It is simple. We will remove the alert… and this is also not needed. On clicking the button , the position of the scrollTop in HTML should be kept at zero…

First of all we will see the syntax of this. What is syntax? Syntax is in such a way that whenever we have to move we only have to pass value… Reload.

Will go down and click. You can see that as soon as I clicked my scrollbar moved right away. I’ll come back down and click on this button. On clicking my scrollbar is moving up right away. Meaning going down to up.

So, what we did is passed the current value of scrollbar using scrollTop.

Total we saw two examples. I’ll go down again and click on the button I’ll come up suddenly.

So we saw two programs today. In the first program we got the current value of the scrollbar and the second program in which on clicking whatever position of my scrollbar is it will be returned to the top that we saw.

The scroll which is occurring is quick so to make it smooth what we can do is go to the program inside CSS… HTML we’ll add scroll-behavior smooth. 

You can notice in HTML we only have to add scroll-behavior smoothly. Save. Reload the program.

I’ll come down and when I click on the button instead of a quick jump there will be a smooth jump. Okay?

I’ll come down again and click. So, if you want to reach smoothly at the top, we’ll click on a simple click button in html and add scroll-behavior smooth CSS.

Hence these were our two programs scrollTop and scrollTop in one we added value and other went at top meaning smoothly scrolled up.

The second example which we saw many times in websites where we are given a button in the corner to scroll up on clicking that we can smoothly go up in websites.

This is our today’s segment in which we saw till scrollTop. Still our attributes and property method are left.

We’ll continue this segment in the other segment. In the next segment will see the other methods related to HTML which are left “attribute” and “property” will be seen in the next segment. Thank you.