Smooth Scroll down to div, click on anchor in jQuery

Click on button to smoothly scroll down to object its easy using jQuery code. Use below script after jQuery library

$(function() {
	$('a[href="#productDetail"]').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname)
			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			if (target.length) {
				$('html, body').animate({
					scrollTop: target.offset().top
				}, 1000);
				return false;

You can manage the speed of scroll also, In jQuery code I used 1000 milliseconds to reach on point. You can increase on decrease the time.

Add html code, In this example I have used Anchor tag but you can used any Html tag. Add id to tag.

Scroll down with clicking on Anchor Smooth Scroll down to div without click on Anchor

<a href="#productDetail">View Product Detail</a>
<div id="productDetail">
	text text text



Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Harinder Singh

Harinder Singh

My name is Harinder Singh and I specialize in Software industry. I consider myself as a life learner. I love learning new concepts, embracing new ideas and reading and searching for innovation.