How to scroll to specific element using jQuery ?

Last Updated : 03 Aug, 2021

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.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">

    <script src=
"https://code.jquery.com/jquery-3.5.1.min.js"
        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>

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.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">

    <script src=
"https://code.jquery.com/jquery-3.5.1.min.js"
        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>

Output:

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

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.