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

Comments

  1. Đào QuânJanuary 19, 2016 at 8:25 PM

    dịch vụ kế toán thuế tại quận gò vấp
    dịch vụ kế toán thuế tại quận 2
    dịch vụ kế toán thuế tại quận 1
    học kế toán thực hành cấp tốc
    học kế toán thực hành cấp tốc
    học kế toán thực hành tại cầu giấy
    học kế toán thực hành tại cầu giấy
    học kế toán thực hành tại thanh xuân
    học kế toán thực hành tại thanh xuân
    khóa học kế toán xây dựng
    khóa học kế toán xây dựng
    khóa học kế toán xây dựng
    khóa học kế toán toán dành cho giám đốc và nhà quản lý
    dịch vụ thành lập doanh nghiệp công ty trọn gói
    dịch vụ thành lập doanh nghiệp công ty tại hải phòng
    dịch vụ tạm ngừng giải thể doanh nghiệp
    dich vu ke toan thue
    dich vu lam bao cao tai chinh

    ReplyDelete
  2. Sajjad HossainAugust 7, 2016 at 3:31 PM

    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
  3. Naviya NairAugust 23, 2016 at 1:26 AM

    I have read your blog its very attractive and impressive. I like it your blog.

    PHP Training in chennai | PHP Training Course

    PHP Training in chennai | Online PHP Course

    ReplyDelete
  4. hoa pikeyFebruary 13, 2017 at 2:24 AM

    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
  5. Candy SimMay 11, 2017 at 3:13 AM

    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
  6. FLIP DIVINGDecember 3, 2017 at 8:37 PM

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

    ReplyDelete
  7. Neha KhanSeptember 20, 2019 at 12:42 AM

    Himachal Pradesh University BA Part 2 Result

    Himachal Pradesh University BA Part 3 Result

    ReplyDelete

Post a Comment

Popular posts from this blog

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.
263 comments
Read more

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.
143 comments
Read more

File Upload with Progress Bar using jQuery and PHP

In this post you will learn how to create a AJAX file uploading system with progress bar using jQuery and PHP. For this purpose we will going to use jQuery Form Plugin. It is a easy to use and powerful jQuery AJAX form submitting plugin. It supports XMLHttpRequest Level 2 and iframe file transportation. That's why it will work for both old and new browsers.
88 comments
Read more