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
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;
});
});
});
