jQuery scrollTop() Method

Quiz

The scrollTop() method in jQuery is used to set or get the vertical scroll position of an element.

To get the scroll position, this method returns the vertical scrollbar position of the first matched element.

To set the scroll position, this method sets the vertical scrollbar position for all matched elements.

Note: When the scrollbar is at the complete top, the position is 0.

Syntax

We have two different syntaxes to âsetâ and âgetâ the scrollbar position −

Following is the syntax to get the vertical scrollbar position:

$(selector).scrollTop()

Following is the syntax to set the vertical scrollbar position:

$(selector).scrollTop(position)

Parameters

This method accepts the following parameters. The same are described below −

selector: Specifies the element(s) to manipulate.
position: Specifies the vertical scroll position to set in pixels.

Example 1

In the following example, we are using the scrollTop() method to return the vertical scrollbar position for a <div> element −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                var scrollTop = $("div").scrollTop();
                alert("Current scroll position: " + scrollTop + "px");
            });
        });
    </script>
</head>
<body>
    <div style="width:100px; height:150px; overflow:auto; border: 2px solid black;">Tutorialspoint.com is a dedicated website to provides quality online education in the domains of Computer Science, Information Technology, Programming Languages, and other Engineering as well as Management subjects. This website was launched by an AMU alumni, Mr. Mohtashim, with a single tutorial on HTML in year 2006.</div>
    <button>Get Scroll Position</button>
</body>
</html>

After executing the above program, scroll up the content inside the div and click the button below to get the position of the vertical scrollbar.

Example 2

In this example, we are setting the vertical scrollbar position for a div element using the scrollTop() method −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").scrollTop(100)
            });
        });
    </script>
</head>
<body>
    <div style="width:100px; height:150px; overflow:auto; border: 2px solid black;">Tutorialspoint.com is a dedicated website to provides quality online education in the domains of Computer Science, Information Technology, Programming Languages, and other Engineering as well as Management subjects. This website was launched by an AMU alumni, Mr. Mohtashim, with a single tutorial on HTML in year 2006.</div>
    <button>Get Scroll Position</button>
</body>
</html>

After executing the program, scroll up the content inside the div and click on the button below, it will then set the scroll bar position to 100 pixels.

jquery_ref_html.htm

Print Page