Posted inProgramming / JavaScript / jQuery

jQuery An Animated Scroll To Top Button

jQuery An Animated Scroll To Top Button

Today, We want to share with you jQuery An Animated Scroll To Top Button.
In this post we will show you How To Create An Animated Scroll To Top Button using jQuery Example, hear for jQuery Smooth Scroll to top button we will give you demo and example for implement.
In this post, we will learn about Animated Scroll To Top Button with jQuery with an example.

Welcome to the In Pakainfo.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.Scroll To Top Button using jQuery

Body Part




Demo

jquery Scrolltop Animate

by Pakainfo.com

Scroll To Top Button using jQuery

MY SERVICES


Free Online Difference Tools

Difference Tools : Compare Two texts Online


Free Crop and Resize Images Online

The free online Fotor Photo Cropper can help you to crop image online to the exact size you want.


Free Email Checker

A simple tool to check whether an email address exists. Email Verifier - Verify Email Address For Free With Our Verifier Tool : pakainfo Tools


HTML, CSS & JavaScript Minifier/Maxifier

Free web-based tool to minify HTML and any CSS or JS included in your markup : pakainfo Tools

Color Picker Tools

RGB Color Pickers And Generators - Free Online Tool. Please click at Preview element to see color picker

Back to Top

CSS Part


body {
	font: .88em/150% Arial, Helvetica, sans-serif;
	margin: 30px auto;
}
h1 {
	font: bold 80%/120% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	margin: 0 0 10px;
	color: #999;
}
h3 {
	font-size: 1.5em;
	margin: 0 0 8px;
}
h3 {
	font-size: 1.6em;
	margin: 20px 0 5px;
}
a {
	color: #69C;
	text-decoration: none;
}
a:hover {
	color: #F30;
}
p {
	margin: 0 0 10px;
}
em {
	font: italic 100% "Times New Roman", Times, serif;
}
.credits {
	border-bottom: solid 1px #eee;
	padding-bottom: 10px;
	margin: 0 0 30px;
}
#pagewrap {
	margin: 0 auto;
	width: 600px;
	padding-left: 150px;
	position: relative;
}


/*
Back to top button 
*/
#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
}
#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}
/* arrow icon (span tag) */
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(up-arrow.png) no-repeat center center;
	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
}

include script and jquery




$(document).ready(function(){

	// hide #back-top first using jQuery
	$("#back-top").hide();
	
	// fade in #back-top using jQuery
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});

		// scroll body to 0px on click using jQuery
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});

});


View Demo

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

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

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype