Open In App

jQuery scrollTop() Method

Last Updated : 10 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The scrollTop() method is an inbuilt method in jQuery which is used to return the top vertical position of the scrollbar.

Syntax:

$(selector).scrollTop(position)

Parameters: This method accepts a single parameter positiona which is optional. It is used to specify vertical scrollbar position in pixels.

Return Value: This method returns the top position of the scroll bar.

The below example illustrates the scrollTop() method in jQuery:

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>scrollTop method</title>
    <script src=
    </script>
 
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                alert($("div").scrollTop() + " px");
            });
        });
    </script>
    <style>
        div {
            border: 1px solid black;
            width: 100px;
            height: 150px;
            overflow: auto;
        }
    </style>
</head>
 
<body>
    <center>
        <div>
            Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!. Welcome
            to GeeksforGeeks!. Welcome to GeeksforGeeks!. Welcome to
            GeeksforGeeks!. Welcome to GeeksforGeeks!. Welcome to
            GeeksforGeeks!. Welcome to GeeksforGeeks!. Welcome to
            GeeksforGeeks!. Welcome to GeeksforGeeks!. Welcome to
            GeeksforGeeks!. Welcome to GeeksforGeeks!. Welcome to
            GeeksforGeeks!. Welcome to GeeksforGeeks!. Welcome to
            GeeksforGeeks!. Welcome to GeeksforGeeks!
      </div>
        <br>
 
        <!-- move the scroll bar and click on this button -->
        <button>Click Here !</button>
    </center>
 
</body>
 
</html>


Output:

jquery-34



Previous Article
Next Article

Similar Reads

How to animate scrollTop using jQuery ?
The scrollTop property in JavaScript is used to set or return the vertical scrollbar position of any element. Setting the scrollTop to any value will make the page scroll to that location. The scroll by default takes place immediately and abruptly scrolls to the value. This scrolling can be animated using jQuery. The animate() method is used to per
3 min read
jQWidgets jqxScheduler scrollTop() Method
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxScheduler widget is used to show a set of appointments in a day, week, month, timeline day, timeline week as well as timeline month views. The scrollTop() met
3 min read
Angular PrimeNG ScrollTop Element
Angular PrimeNG is a UI component catalog for angular applications. It consists of a wide range of UI components that help in making fast and scalable websites. In this article, we will see the ScrollTop Element in Angular PrimeNG. The ScrollTop Component is displayed after the user has scrolled up to a certain scroll position and is used to go to
4 min read
HTML DOM scrollTop Property
The DOM scrollTop property is used to return or set the number of pixels an element is scrolled vertically. If the element's content doesn't generate a scroll bar, then its scrollTop value is 0. Syntax: It returns the scrollTop property.element.scrollTopIt is used to set the scrollTop propertyelement.scrollTop = value Where value specifies the numb
2 min read
Angular PrimeNG ScrollTop Window
Angular PrimeNG is a UI component catalog for angular applications. It consists of a wide range of UI components that help in making fast and scalable websites. In this article, we will see ScrollTop Window in Angular PrimeNG. The ScrollTop Component is displayed after the user has scrolled up to a certain scroll position and is used to go to the t
3 min read
Angular PrimeNG ScrollTop Threshold
Angular PrimeNG is a UI component catalog for angular applications. It consists of a wide range of UI components that help in making fast and scalable websites. In this article, we will see ScrollTop Threshold in Angular PrimeNG. The ScrollTop Component is displayed after the user has scrolled up to a certain scroll position and is used to go to th
4 min read
Angular PrimeNG ScrollTop Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the ScrollTop component in Angular PrimeNG. ScrollTop component: It is used to make a component that gets dis
4 min read
Angular PrimeNG ScrollTop Properties
Angular PrimeNG is a collection of Interactive UI components for Angular applications. Developers can use these components to make beautiful and responsive web interfaces in no time as most of the components have all the necessary functions implemented. In this article, we will be discussing Angular PrimeNG ScrollTop Properties. The ScrollTop Compo
4 min read
Angular PrimeNG ScrollTop Target Element
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the ScrollTop Target Element in Angular PrimeNG. The ScrollTop Component is displayed after the user has scro
3 min read
Foundation CSS Accordion Menu ScrollTop Drilldown
Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to lay out nice responsive websites, apps, and emails and can be accessible to any device. Accordion Menu is used to convert the basic vertical menu into an expandable menu with the help of the Accordion Menu plugin
3 min read