jQuery is a popular JavaScript library used by millions of websites and organizations. It offers tons of features and plugins. It also allows you to do a lot of powerful transitions, DOM manipulations and even animations. Sometimes you may want to scroll to a particular element on your page, with the click of a button, or some other event. In this article, we will learn how to scroll to element with jQuery.
How to Scroll to Element with jQuery
Let us say you have the following HTML page consisting of 2 divs and 1 button.
<html>
<body>
<button id="click">Click me</button>
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
</body>
</html>
Each div has height of 1000px. Let us say you want to scroll to div2 when you click on button. You can do this using following JavaScript.
$(document).ready(function (){
$("#click").click(function (){
$('html, body').animate({
scrollTop: $("#div2").offset().top
}, 2000);
});
});
Let us look at the above code. We add a click listener to button. When you click the button, we call animate function on the HTML body and specify the scrollTop argument as the top position of div2. This is the position to which your browser will scroll when the button is clicked.
If you don’t want to animate things, you can directly call scrollTop function on the HTML body.
$(document).ready(function (){
$("#click").click(function (){
$('html, body').scrollTop( $("#div2").offset().top);
});
});
So you can add the above code in a script tag, as shown below.
<html>
<body>
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
<button id="click">Click me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#click").click(function (){
$('html, body').animate({
scrollTop: $("#div2").offset().top
}, 2000);
});
});
</script>
</body>
</html>
In this article, we have learnt how to scroll to element using jQuery. It allows you to make your websites and applications more interactive and simplifies user navigation. This is really useful if you have long vertical pages with many elements or if you have dynamically loaded pages such as activity or timelines.
Also read:
How to Add Delay in JavaScript Loop
How to Use Dynamic Variable Names in JavaScript
How to Get Difference Between Two Arrays in JavaScript
How to Compare Dictionary in Python
How to Compare Objects in JavaScript