Smooth scrolling between sections of Web page using jQuery

This jQuery codehelps you add smooth SCROLL animation when you click to Go To link in your web page. I am using .animate jQuery function in following code.
In this tutorial you will learn how you can create an animated scroll to top or any element with jQuery.

Create Button or Link

First we need to create HTML button/link.

<a href="javascript:void(0);" class="goToLink">Scroll To Middle Section</a>

 

JQuery Code

Write jQuery code to go to Target section of same web page.

jQuery(document).ready(function(){	
	jQuery(document).on("click","a.goToLink",function(){
		jQuery('html, body').animate({
			scrollTop: jQuery(".targetElement").offset().top,
		}, 1000);
	});
});

In above code . medddleElement is class name of Target element where you want to go on web page.