Simple Jquery Scroll To Top Example

Today, We want to share with you Simple Jquery Scroll To Top Example.In this post we will show you Creating a Back to Top Button with CSS & jQuery, hear for How to create Scroll to Top animation in jQuery we will give you demo and example for implement.In this post, we will learn about How to Scroll to the Top of the Page Using jQuery/JavaScript with an example.

Simple Jquery Scroll To Top Example

There are the Following The simple About Simple Jquery Scroll To Top Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop Animated Scroll to Top with jQuery, so the Smooth Page Scroll to Top with jQuery for this example is following below.

Step 1: HTML Part


<a href="#" class="scroll-top"><i class="fa fa-chevron-up"></i></a>

<h1>javascript/jQuery scroll to top of page Example</h1>
<p> is the most popular Programming & Web Development blog. </p>
<p>Hello! I am angular Web-devloper and pakainfo is my web technologies blog. My specialities are Vuejs,API,angularjs,Vuejs,PHP, API, jQuery,Earn money,HTML,CSS eCommerce,JS,Laravel, CMS and bespoke web application development.</p>
<p>Our mission is to provide the best online resources on programming and web development.</p>
<p>We deliver the useful and best tutorials for web professionals — developers, programmers, freelancers and site owners. Any visitors of this site are free to browse our tutorials, live demos and download scripts.</p>

Step 2: Javascript/jQuery Part


	jQuery(document).ready(function() {
		var smooth = 500;
		jQuery(window).scroll(function() {
			if (jQuery(this).scrollTop() > 200) {
			} else {

		jQuery('.scroll-top').click(function(event) {
			jQuery('html').animate({scrollTop: 0}, smooth);
			return false;

Step 3: CSS Style Part

insert basic styling for scroll to top animation

.scroll-top { 	
	position: fixed; 
	bottom: 25px; 
	right: 25px; 
	text-decoration: none; 
	color: #fff; 
	background: #c60000; 
	padding: 10px 25px; 
	display: none; 
	color: #c60000; 
	background: #fff; 

Web Programming Tutorials Example with Demo

Read :

Also Read This 👉   how to Validate Aadhaar Card Number in Javascript? - aadhaar card number validation


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

I hope you get an idea about Simple Jquery Scroll To Top Example.
I would like to have feedback on my 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.