Simple Jquery Scroll To Top Example

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.

  Laravel Pagination Example Tutorial

Step 1: HTML Part

index.html

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

<h1>javascript/jQuery scroll to top of page Example</h1>
<p>pakainfo.com 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

main.js

<script>            
	jQuery(document).ready(function() {
		var smooth = 500;
		jQuery(window).scroll(function() {
			if (jQuery(this).scrollTop() > 200) {
				jQuery('.scroll-top').fadeIn(smooth);
			} else {
				jQuery('.scroll-top').fadeOut(smooth);
			}
		});

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

Step 3: CSS Style Part

insert basic styling for scroll to top animation

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

Web Programming Tutorials Example with Demo

Read :

  Smooth Scroll to Top with jQuery

Summary

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 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.