Animated Scroll to Top with jQuery

Today I am going to show you how you can create a smooth animated scroll to top with jQuery. It is very easy and we need to code only couple of lines to implement this. We need to code for

Hide button on load
If user scroll more than 400px then show the button
If user go to top then hide the button
Scroll to top with Animate method

Let's go to implement it..

Live Demo

HTML Part
#back-top is the scroll top button. #top is added to the body tag for no JavaScript fallback.

<html>
<head>
  <title>Scroll to top</title>
<head>
<body id="top">
  <div class="wrap"> <!--main div-->
  <!-- contents here -->
  </div>
  <div id="back-top"><!-- scroll top button -->
    <a href="#top"><span></span>Back to Top</a>
  </div>
</body>
</html>

CSS Part
#back-top position is fixed 30px bottom and 100px right, top.png as background and transition is 1 second.

/*
Back to top button 
*/
#back-top {
  position: fixed;
  bottom: 30px;
  right: 100px;
}
#back-top a {
  width: 64px;
  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: 64px;
  height: 64px;
  display: block;
  margin-bottom: 7px;
  background: #ddd url(top.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: #fff;
}
#back{
  font-weight: bold;
  font-size: 22px;
  padding:10px;
  border: 2px solid #333;
  border-radius: 29px;
}

jQuery Part

$(function() {
  // cache scroll to top button
  var b = $('#back-top');
  // Hide scroll top button
  b.hide();
  // FadeIn or FadeOut scroll to top button on scroll
  $(window).on('scroll', function(){
    // if you scroll more then 400px then fadein goto top button
    if ($(this).scrollTop() > 400) {
      b.fadeIn();
    // otherwise fadeout button
    } else {
      b.fadeOut();
    }
  });
  // Animated scroll to top
  b.on('click', function(){
    $('html,body').animate({
      scrollTop: 0
    }, 500 );
    return false;
  });
});

Multiple File Upload with Progress Bar using PHP & jQuery

Some days age I have created a post that deals with How we can upload file with progress bar using php and jQuery . Some of my readers asked me how we can upload multiple files with progress bar. In this post I am going to show you how we can upload multiple files with progress bar. We can upload multiple files with progress bar exactly same way as I shown previous. But we need to do some modification with our file upload form and our php script to handle multiple files.

Force File Download with PHP

If you want to control or track your downloadable contents then a force file downloader script can give you more option. Especially if you want make images or other stemming contents like music file (mp3, wav, ogg), video files (flv, mp4, ogg, 3gpp), css, JavaScripts or even a php file downloadable then you must need to use a force file downloader script. In this post I am going to share a simple but useful force file downloader script.

Multiple File Upload with PHP

Sometimes we need to allow our users to upload multiple file upload. On my previous post I was shown the basic of simple file upload with PHP. Today I am going to show you how to allow users to upload multiple files. It is almost similar like simple file upload but we need to do some modification with html markup and php code . multiple attribute is needed to add on the html markup. Major web browsers like Firefox, Chrome, Safari and IE 9+ support this attribute. Now I am going to show you how to upload multiple file with PHP and basic HTML form.

w3bees.com

Search This Blog