Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to scroll to a specific element using jQuery?
jQuery- a popular JavaScript library that is used in manipulating HTML documents, handling events, creating animations, and performing other common web development tasks.
jQuery is famous for its ability to simplify JavaScript programming by providing a simple and concise syntax for selecting and manipulating DOM elements. Like using jQuery, instead of writing complex JavaScript code to traverse the DOM and manipulate elements, we can use jQuery to do it with just some lines of code.
We sometimes encounter large content pages on websites and to go to a specific section, we want to perform the scrolling in the page up or down. With jQuery, this task can be achieved easily and efficiently. In this article, how to scroll to a specific element using jQuery. Along with this, we will also provide examples and syntaxes for each approach, so that it is easy for us to choose the one that best fits our needs and implement it in our own web project.
Different Approaches to Scroll to a Specific Element in jQuery
There are several approaches available that can be used to scroll to a specific element using jQuery. We’ll now see the 3 commonly used methods to do this task. Let’s see them one by one in detail.
Approach 1: Using the scrollTop() Method
This is the first approach to scroll to the specific element using jQuery. In this approach, the scrollTop() method is used to set the vertical scrollbar position for the selected element which is further used in scrolling to a specific element simply by setting its scrollTop property to the top position of the element. See the syntax below.
Syntax
The below syntax is used to scroll to specific elements and animate them to scroll to the top position of the element with the specified ID.
$('html, body').scrollTop($("#divID").offset().top);
Example
In this example, a button is created which when clicked scrolls the page to the specified section. In this case, it will scroll to the element having the ID as #divElement element using the scrollTop() method. Here, the offset().top function is also used to get the top position of the element.
<html>
<head>
<title>Scrolling to element using scrollTop() method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
$('html, body').scrollTop($("#divElement").offset().top);
});
});
</script>
<style>
body {
height: 1500px;
}
#divElement {
background-color: green;
height: 100px;
font-size: 40px;
}
</style>
</head>
<body>
<h2>Scrolling to element using scrollTop() method</h2>
<button id="button">Click to Scroll</button>
<div style="padding-top: 500px;"></div>
<div id="divElement">
<p>You have scrolled till here! Good Job.</p>
</div>
</body>
</html>
Approach 2: Using the animate() Method
This is the second approach to scroll to the specific element using jQuery. In this approach, the animate() method is used to create custom animations on a webpage like scrolling top, bottom, etc. The animate() method also changes an element from one state to another using the CSS styles. Like here the CSS property value is changed gradually for creating an animated effect.
Syntax
The below syntax is used to scroll to specific elements and animate them to scroll to the top position of the element with the specified ID. Here, the number "1000" is the duration of the animation in milliseconds which will determine the scroll speed.
$('html, body').animate({
scrollTop: $("#divID").offset().top
}, 1000);
Example
In this example, a button is created which when clicked scrolls the page to the specified section. In this case, it will scroll to the element having the ID as #divElement element using the animate() method. Here, the offset().top function is also used to get the top position of the element, and also the 2000 parameter specifies the duration of the animation in milliseconds.
<html>
<head>
<title>Scrolling to element using animate() method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
$('html, body').animate({
scrollTop: $("#divElement").offset().top
}, 1000);
});
});
</script>
<style>
body {
height: 1500px;
}
#divElement {
background-color: green;
height: 100px;
font-size: 40px;
}
</style>
</head>
<body>
<h2>Scrolling to element using animate() method</h2>
<button id="button">Click to Scroll</button>
<div style="padding-top: 500px;"></div>
<div id="divElement">
<p>You have scrolled till here! Good Job.</p>
</div>
</body>
</html>
Approach 3: Using the scrollIntoView() Method
This is the third approach to scroll to the specific element using jQuery. In this approach, we have used the scrollIntoView() method which is a part of native JavaScript. It is used to scroll the element's ancestor containers such that the element on which scrollIntoView() is called is available to see to the user.
This is also used to scroll to a specific element. See the below syntax for more details.
Syntax
The below syntax is used to scroll to specific elements and animate them to scroll to the top position of the element with the specified ID using the scrollIntoView() method.
document.getElementById("divID").scrollIntoView();
Example
In this example, a button is created which when clicked scrolls the page to the specified section. In this case, it will scroll to the element having the ID as #divElement element using the animate() method. Here, JavaScript is used to access the element and call the method, simultaneously we have used jQuery to handle the click event of the button. Note, that this approach is the kind of easiest of all other methods, but it may not be supported by some browsers.
<html>
<head>
<title>Scrolling to element using scrollIntoView() method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
document.getElementById("divElement").scrollIntoView();
});
});
</script>
<style>
body {
height: 1500px;
}
#divElement {
background-color: green;
height: 100px;
font-size: 40px;
}
</style>
</head>
<body>
<h2>Scrolling to element using scrollIntoView() method</h2>
<button id="button">Click to Scroll</button>
<div style="padding-top: 500px;"></div>
<div id="divElement">
<p>You have scrolled till here! Good Job.</p>
</div>
</body>
</html>
Conclusion
In this article, we learned how to scroll to a specific element using jQuery. Apart from this, we learned the different approaches that can be used to scroll to a specific element using jQuery like the animate() method, scrollTop() method, or scrollIntoView() method to achieve this task.
By implementing these techniques, developers can create a better user experience on their websites, making it easier for users to navigate to specific sections of a webpage. Overall, jQuery is a powerful tool for front-end development, and scrolling to specific elements is just one of many features that make it a popular choice among developers.
14K+ Views
To Continue Learning Please Login