Using the jQuery animate() method, a link clicked can smoothly scroll down (or up) the page to a page anchor.

The link may look like this.

<a href="#" class="order_now_link">Scroll to new section.</a>

The following will allow the user to scroll smoothly down the page to the “product ordering section” when the above button is clicked.

• Line 4 has the scroll speed set at 500ms

$('.order_now_link').click(function () {
	$('html, body').animate({
		scrollTop: $('.product_ordering_section').offset().top
	}, 500);
});

The following adds an offset from the top of 120px, perhaps to compensate for a sticky header that is 110px in height.

• Line 3 has a 120px offset
• Line 4 has the scroll speed set at “fast”

$('.order_now_link').click(function () {
	$('html, body').animate({
		scrollTop: $('.product_ordering_section').offset().top - 120
	}, fast);
});