Home »
jQuery »
jQuery Examples
Scroll to an element with jQuery
This tutorial will help you to scroll to an element using jQuery.
Submitted by Pratishtha Saxena, on August 12, 2022
Sometimes it is important to scroll directly to the element we wish to. You must have seen many websites where when you click a button, it scrolls to that particular section. So not wasting much time, let’s figure out how to create this using jQuery.
The two most important methods that are going to be used for this are:
- scrollTop() Method
- offSet() Method
jQuery scrollTop() Method:
This method is very useful as it returns the value of the scroll bar for the very first matched element amongst all.
jQuery offset() Method:
As the scrollTop() returns the value of the scroll bar, the offSet() method returns the coordinate of that scroll bar position.
Apart from these two methods, the animate() method will also be taken into consideration. This method will help us to transform from one element to another using the scrolling method provided inside it.
Let's consider an example to see how can we scroll to a particular element.
jQuery Example for scrolling to an element
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
<style>
html, body{
height: 400%;
}
.div1{
height: 100%;
}
</style>
</head>
<body>
<div class="div1">
<button id="button1">Friday</button>
<h1>Week Days: </h1>
<br>
<h3 id="one" style="height: 2%;">Monday</h3>
<h3 id="two" style="height: 2%;">Tuesday</h3>
<h3 id="three" style="height: 2%;">Wednesday</h3>
<h3 id="four" style="height: 2%;">Thursday</h3>
<h3 id="five" style="height: 2%;">Friday</h3>
<h3 id="six" style="height: 2%;">Saturday</h3>
<h3 id="seven" style="height: 2%;">Sunday</h3>
</div>
</body>
</html>
CSS:
$(document).ready(function() {
$('#button1').click(function() {
$('html, body').animate({
scrollTop: $('#five').offset().top
}, 2000);
});
});
jQuery:
$(function() {
$('#togglethis').click(function() {
$('#content').slideDown();
});
});
Output:
Before clicking.
After clicking.
