How to scroll window using jQuery ?
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 = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > </ script > < style > #body { height: 1000px; } </ style > </ head > < body style = "text-align:center;" id = "body" > < h1 id = "h1" style = "color:green;" > w3wiki </ 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 = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > </ script > < style > #body { height: 1000px; } </ style > </ head > < body style = "text-align:center;" id = "body" > < h1 id = "h1" style = "color:green;" > w3wiki </ 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: