How to scroll to specific element using jQuery ?

Many times, in our website we want to scroll automatically to a section of the webpage when we click on a button or a heading in a navbar or a list. So, to achieve this automatic scrolling to the required element, we need to take the help of jQuery. Using jQuery, we can achieve this in a very simple way. But first we need to understand two methods namely scrollTop() and offSet() in jQuery.

scrollTop() method: It helps to get the current vertical position of the scrollbar of the first element, in the set of all matched elements.

scrollTop() method: It is used to set the vertical position of the scroll bar to the value ‘val’.

offSet() Method: It is used to get the coordinates of the first element in the set of all matched elements.

Example 1: This example describes how to scroll a specific element using jQuery.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <script src=
        integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous">
    </script>
      
    <title>
        How to scroll to specific 
        item using jQuery?
    </title>
      
    <style>
        div {
            color: #0f9d58;
            border: 3px solid #0f9d58;
            width: 200px;
            height: 100px;
            overflow: auto;
        }
  
        p {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
  
<body>
    <div class="demo">
        <h1>Heading</h1>
        <p>paragraph</p>
    </div>
  
    <script>
        var container = $('div');
        var scrollTo = $('p');
  
        // Calculating new position of scrollbar
        var position = scrollTo.offset().top 
                - container.offset().top 
                + container.scrollTop();
  
        // Setting the value of scrollbar
        container.scrollTop(position);
    </script>
</body>
  
</html>

chevron_right


Output:

Example 2: In this example, we will see how to scroll to different sections of the page by clicking different buttons, along with a scrolling effect.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <script src=
        integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous">
    </script>
      
    <title>
        How to scroll to specific 
        item using jQuery?
    </title>
  
    <style>
        div {
            color: #0f9d58;
            border: 3px solid #0f9d58;
            margin: 10px;
            width: 200px;
            height: 100px;
            overflow: auto;
        }
  
        p {
            width: 300px;
            height: 300px;
        }
  
        button {
            margin: 10px;
        }
    </style>
</head>
  
<body>
    <div class="demo">
        <h1>Heading</h1>
        <p id="p1">paragraph 1</p>
        <p id="p2">paragraph 2</p>
    </div>
  
    <button onclick="scrollParagraph1()">
        paragraph 1
    </button>
  
    <button onclick="scrollParagraph2()">
        paragraph 2
    </button>
  
    <script>
        var container = $('div');
  
        // Scrolls to paragraph 1
        function scrollParagraph1() {
            var scrollTo = $("#p1");
  
            // Calculating new position
            // of scrollbar
            var position = scrollTo.offset().top 
                - container.offset().top 
                + container.scrollTop();
  
            // Animating scrolling effect
            container.animate({
                scrollTop: position
            });
        }
  
        // Scrolls to paragraph 2
        function scrollParagraph2() {
            var scrollTo = $("#p2");
  
            // Calculating new position 
            // of scrollbar
            var position = scrollTo.offset().top 
                - container.offset().top 
                + container.scrollTop();
  
            // Animating scrolling effect
            container.animate({
                scrollTop: position
            });
        }
    </script>
</body>
  
</html>

chevron_right


Output:

When the second button is clicked, the output is as follows.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.