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.

By Ashutosh Pratap

I am software developer by profession and doing work and research in field of Computer programmings like PHP, WordPress, Magento, jQuery, Google APIs and many more web languages. Apart from this I write blogs on programming languages like PHP, Javascript, WordPress etc. I am also individual and independent Freelancer so you can hire me for your web work.

Leave a comment

Your email address will not be published. Required fields are marked *