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.

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.

Also Read :  how to install PHP Accelerator in Xampp

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 :

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.

Leave a Reply

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