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

Read Also:  jQuery An Animated Scroll To Top Button

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

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 :

Read Also:  PHP Laravel MySQL CRUD Application

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  sticky Scroll Back to Top Button using jQuery and CSS
  2. Read Also:  codeigniter count rows in view & controller
  3. Read Also:  vue Check box binding Example
  4. Read Also:  how to call javascript function in html & JavaScript Define
  5. Read Also:  Smooth Scroll to Top with jQuery
  6. Read Also:  CSS Modal Popup Box Window Plugins
  7. Read Also:  How to Select VueJs Check All Uncheck All Checkboxes
  8. Read Also:  jQuery Back to top
  9. Read Also:  Bootstrap datepicker example text input with date format
  10. Read Also:  How to Configure Virtual Host in XAMPP

Leave a Comment

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