Smooth Scroll to ID using jQuery

Today, We want to share with you Smooth Scroll to ID using jQuery.In this post we will show you Add smooth scrolling to page anchors, hear for Smoothly scroll to an element without a jQuery plugin we will give you demo and example for implement.In this post, we will learn about Animated scroll to anchor/id function with jQuery Script with an example.

Smooth Scroll to ID using jQuery

There are the Following The simple About Smooth Scroll to ID using jQuery Full Information With Example and source code.

Read Also:  Create Animated Scroll To Top Button using jQuery

As I will cover this Post with live Working example to develop Jquery Smooth Scroll to a name and id, so the jquery scroll to element in div for this example is following below.

Animate page to id with jQuery

HTML Part

<a href="#about_us">About US</a>
<a href="#conatct_us">Contact Us</a>

<hr>

<div id="about_us">About US</div>

<hr>

<div id="conatct_us">Contact Us</a>

	<hr>

jQuery Part

$("a[href^='#']").click(function(e) {
	e.preventDefault();
	
	var position = $($(this).attr("href")).offset().top;

	$("body, html").animate({
		scrollTop: position
	} /* simple define a speed */ );
});

CSS Part

hr {
	height: 150vh;
}

Web Programming Tutorials Example with Demo

Read :

Read Also:  jQuery Routing using Single Page Application without framework

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Smooth Scroll to ID using jQuery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.