How To 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.

How To Scroll To An Element Using Jquery, Scroll To An Element Using Jquery, Scroll To An Element, How To Scroll To An Element, Scroll, Scroll To Div In Jquery, Scroll To table In Jquery, Scroll To Top In Jquery, Scroll To Bottom In Jquery, Jquery, Asp.Net

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.



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.