Pakainfo

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

<div id="pagewrap">
 <h1>Demo</h1>
 <h3><a href="https://www.pakainfo.com">jquery Scrolltop Animate</a></h3>
 <p class="credits"><em>by <a href="https://www.pakainfo.com">Pakainfo.com</a></em></p>
 <h3>Scroll To Top Button using jQuery</h3>

 <h1>MY SERVICES</h1> 
<br />
<h3><a class="demo-css" href="https://www.pakainfo.com/ng/" target="_blank" rel="nofollow">Free Online Difference Tools</a></h3>
<h4>Difference Tools : Compare Two texts Online</h4>
<br />

<h3><a class="demo-css" href="https://www.pakainfo.com/img/" target="_blank" rel="nofollow">Free Crop and Resize Images Online</a></h3>
 <h4> The free online Fotor Photo Cropper can help you to crop image online to the exact size you want.</h4>
<br />

<h3><a class="demo-css" href="https://www.pakainfo.com/email/" target="_blank" rel="nofollow">Free Email Checker</a></h3>
<h4>A simple tool to check whether an email address exists.
Email Verifier - Verify Email Address For Free With Our Verifier Tool : pakainfo Tools</h4>
<br />

<h3><a class="demo-css" href="https://www.pakainfo.com" target="_blank" rel="nofollow">HTML, CSS & JavaScript Minifier/Maxifier</a></h3>

<h4>Free web-based tool to minify HTML and any CSS or JS included in your markup : pakainfo Tools</h4>
<h3><a class="demo-css" href="https://www.pakainfo.com/color/" target="_blank" rel="nofollow">Color Picker Tools</a></h3>
<h4>RGB Color Pickers And Generators - Free Online Tool. Please click at Preview element to see color picker</h4>

 <p id="back-top">
  <a href="#top"><span></span>Back to Top</a>
 </p>


</div>

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