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.

<!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.

<!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.