How to scroll automatically to a particular element using JQuery?

03 Aug, 2021
The task is to scroll to a particular element automatically. Below are the approaches:
Approach 1:
Get the height of the element by .position().top property.
Use .scrollTop() method to set the vertical position of the scrollbar equal to the calculated height of the particular element.
Example 1: This example uses the approach discussed above.
<!DOCTYPE HTML><html>  <head>    <title>        How to scroll automatically to a particular element.    </title>    <style>        #GFG_DOWN {            margin-top: 370px;        }    </style>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script></head>  <body style="text-align:center;">    <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="color:green;              font-size: 30px;               font-weight: bold;">        This is element.    </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 to the particular element.";          function gfg_Run() {            $(window).scrollTop($('#GFG_DOWN').position().top);        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
Approach 2:
Get the height of the element by .offset().top property.
Use .animate() method to animate to the element.
Example 2: This example uses the approach discussed above.
<!DOCTYPE HTML><html>  <head>    <title>        How to scroll automatically to a particular element.    </title>    <style>        #GFG_DOWN {            margin-top: 400px;        }    </style>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script></head>  <body style="text-align:center;">    <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="color:green;               font-size: 30px;              font-weight: bold;">        This is element.    </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 to the particular element.";          function gfg_Run() {            $('html, body').animate({                scrollTop: $("#GFG_DOWN").offset().top            }, 500);        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
jQuery-Misc
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
jQuery | children() with Examples
How to get the value in an input text box using jQuery ?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | change() with Examples
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?