Skip to main content

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

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

Let's go to implement it..

Download Source

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

Comments

  1. Great and helpful tutorial. I am using this , This is also simple
    $(document).ready(function(e) {
    var a = 400,
    t = 1200,
    l = 700,
    s = e(".scrool-top");
    e(window).scroll(function() {
    e(this).scrollTop() > a ? s.addClass("scrool-is-visible") : s.removeClass("scrool-is-visible scrool-fade-out"), e(this).scrollTop() > t && s.addClass("scrool-fade-out")
    }), s.on("click", function(a) {
    a.preventDefault(), e("body,html").animate({
    scrollTop: 0
    }, l)
    })
    })
    Animated Scroll To Top Using jQuery

    ReplyDelete
  2. The share your really gives us excitement. Thanks for your sharing. If you feel tired at work or study try to participate in our games to bring the most exciting feeling. Thank you!
    hotmail sign in | red ball game

    ReplyDelete
  3. The blog or and best that is extremely useful to keep I can share the ideas of the future as this is really what I was looking for, I am very comfortable and pleased to come here. Thank you very much.
    animal jam | five nights at freddy's | hotmail login

    ReplyDelete
  4. The information you share is very useful. It is closely related to my work and has helped me grow. Thank you!
    colour switch

    ReplyDelete
  5. It is important that the messages were passed well and clearly Veronica

    ReplyDelete

Post a Comment

Popular posts from this blog

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.

Live Comment System with jQuery Ajax PHP and MySQL

Recently I have been made a post that focused on how to submit form without page refreshing. That post shows the basic functionality of using jQuery Ajax. On the same follow this post will describe how we can create a comment system to post an instant comment without page refreshing. Let's start...

Resize Image While Uploading with PHP

On my previous post I was shown an example how to upload file with php and html. It was based on php simple image upload functionality. Today I am going to show you little bit advance of image uploading. Suppose if you run a website and want to allow users to upload image files than you need to think little bit about server's space and bandwidth. For this purpose you need to do some optimization with image files. Image resize while uploading is one of them. All major website do it in the same way. If a user uploads a 5mb image file they resize it in different sizes and store on there server. It helps them to seed up there website and reduce there budget. Now take a look, how we can do it ourself.