Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery scrollTop()</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#button").click(function() { alert($("p").scrollTop() + " px"); }); }); </script> </head> <body> <p style="height:90px;overflow:auto;border:1px solid #ddd;width:160px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper, metus ac vehicula ultrices, lorem tellus pharetra arcu, eget elementum ipsum erat a eros. Vivamus turpis libero, rhoncus in dolor sed, accumsan imperdiet dolor. Praesent egestas, lorem pellentesque ultricies fermentum, magna sem dignissim quam, nec condimentum elit neque ut diam. Curabitur in purus libero. Pellentesque hendrerit ut mi in pretium. Praesent a sapien ligula. Proin iaculis vestibulum nisl vitae sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan elit eget lectus commodo laoreet at at nunc. Curabitur molestie tellus in sapien vehicula, a placerat erat commodo. Morbi vitae aliquet velit. Donec et nisi et massa vulputate lobortis eget non diam. Proin pellentesque sagittis risus, vitae placerat lorem.</p> <button style="margin:0 0 10px 0;background:#e8e8e8;" class="btn" id="button">Click here</button><br /> </body> </html>