.scrollTop()

jQuery

previous page next page

.scrollTop()

Categories: CSS | Offset | Manipulation > Style Properties

Contents:

.scrollTop() Returns: Integer

Description: Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

  • version added: 1.2.6.scrollTop()

    • This method does not accept any arguments.

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.

Example:

Get the scrollTop of a paragraph.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        p { margin:10px;padding:5px;border:2px solid #666; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <p>Hello</p><p></p>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        var p = $("p:first");
                                      
                                    

                                  

                                  

                                    

                                      $("p:last").text( "scrollTop:" + p.scrollTop() );
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

.scrollTop( value ) Returns: jQuery

Description: Set the current vertical position of the scroll bar for each of the set of matched elements.

  • version added: 1.2.6.scrollTop( value )

    • value
      Type: Number
      An integer indicating the new position to set the scroll bar to.

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. Setting the scrollTop positions the vertical scroll of each matched element.

Example:

Set the scrollTop of a div.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                      div.demo {
                                    

                                  

                                  

                                    

                                      
                                        background:#CCCCCC none repeat scroll 0 0;
                                      
                                    

                                  

                                  

                                    

                                      
                                        border:3px solid #666666;
                                      
                                    

                                  

                                  

                                    

                                      
                                        margin:5px;
                                      
                                    

                                  

                                  

                                    

                                      
                                        padding:5px;
                                      
                                    

                                  

                                  

                                    

                                      
                                        position:relative;
                                      
                                    

                                  

                                  

                                    

                                      
                                        width:200px;
                                      
                                    

                                  

                                  

                                    

                                      
                                        height:100px;
                                      
                                    

                                  

                                  

                                    

                                      
                                        overflow:auto;
                                      
                                    

                                  

                                  

                                    

                                      
                                        }
                                      
                                    

                                  

                                  

                                    

                                        p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <div class="demo"><h1>lalala</h1><p>Hello</p></div>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        $("div.demo").scrollTop(300);
                                      
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page