Given a HTML document and the task is to scroll the document with the help of jQuery. There are two methods to scroll the HTML document window which are discussed below:
Approach:
- Select the document by using selector.
- Use either of the scrollTop() or scrollTo() method to move the document to that position.
Example 1: This example using the scrollTop() method to scroll the HTML document.
<!DOCTYPE HTML>  <html>    <head>     <title>         How to scroll window using jQuery ?     </title>           <script src=     </script>           <style>         #body {             height: 1000px;         }     </style> </head>   <body style = "text-align:center;" id = "body">            <h1 id = "h1" style = "color:green;" >          GeeksForGeeks      </h1>           <p id = "GFG_UP" style =         "font-size: 15px; font-weight: bold;">     </p>           <button onclick = "gfg_Run()">         Click here     </button>           <p id = "GFG_DOWN" style =         "font-size: 23px; font-weight: bold; color: green; ">     </p>           <script>         var el_up = document.getElementById("GFG_UP");         var el_down = document.getElementById("GFG_DOWN");                   el_up.innerHTML = "Click on the button to scroll"                         + " the document.";                   function gfg_Run() {             $(document).scrollTop(100);             el_down.innerHTML = "Position has been set.";         }             </script> </body>    </html> |
Output:
- Before clicking on the button:
- After clicking on the button:
Example 2: This example using the scrollTo() method to scroll the HTML document.
<!DOCTYPE HTML>  <html>    <head>     <title>         How to scroll window using jQuery ?     </title>           <script src=     </script>           <style>         #body {             height: 1000px;         }     </style> </head>   <body style = "text-align:center;" id = "body">            <h1 id = "h1" style = "color:green;" >          GeeksForGeeks      </h1>           <p id = "GFG_UP" style =         "font-size: 15px; font-weight: bold;">     </p>           <button onclick = "gfg_Run()">         Click here     </button>           <p id = "GFG_DOWN" style =         "font-size: 23px; font-weight: bold; color: green; ">     </p>           <script>         var el_up = document.getElementById("GFG_UP");         var el_down = document.getElementById("GFG_DOWN");                   el_up.innerHTML = "Click on the button to scroll"                         + " the document.";                   function gfg_Run() {             window.scrollTo(0, 100);             el_down.innerHTML = "Position has been set.";         }             </script> </body>    </html> |
Output:
- Before clicking on the button:
- After clicking on the button:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
