How To Scroll To An Element Using Jquery

For More Videos Visit Our YouTube Channel

Scroll To An Element Using Jquery

Here we consider how to Scroll To An Element Using Jquery. Here element can be a div, table or any HTML element. This can be achieved easily by Jquery scrollTop. Lets start with an example here.



Suppose we have button with ID ButtonTop on the topside of the page. And there are two div with particular height and background color. Let the ID, Height and Background-color of first div be FirstDiv, 1000px, Yellow respectively.

And the ID, Height and Background-color of second div be SecondDiv, 1000px, Red respectively. When we click on the button, it would scroll to the second div.

Scroll To An Element Using Jquery

Second Step is to add Jquery scrollTop inside Button Click as shown below.

$(function () {
       $("#ButtonTop").click(function () {
            $('html, body').animate({
                  scrollTop: $("#SecondDiv").offset().top
            }, 2000);
            return false;
      });
});



That means when we click on the Button, it would scroll to the Second Div slowly. By this way we can Scroll To An Element Using Jquery.