X

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

This website uses cookies.