If your web page is too big, then it is always recommended to provide your user some kind of easy navigation mechanism, using which user can easily reach to any specific content on your page.

To do this, JQuery provides an easy way to allow user to navigate throughout web page. Here in below example we will use JQuery’s ScrollTop() method alogn with JQuery’s animate() function to make scrolling more smooth.

To Scroll HTML Page to Specific position, say at any div or span:

General syntax to do it, is:

For Example, you have a div on your page with some ID like:

and you want to scroll page to this div, then in JQuery document.ready() function you will write something like:

Here $(‘#my_div_id’).offset().top will return some numeric value based upon the top position of div having id=my_div_id and the page will be scrolled to that div.

Scroll To the Top of Page:

To scroll to the top position of page you have to write something like :

Scroll to Bottom of page:



—Scroll HTML Page Using JQuery—