Create the roll back to top button easily with CSS and Jquery

When the website contents too much, the page is very height and user tired with scroll bar if they want to back to top page.
Very simple if you want improve this, only add a button for roll to top and some code below. Your user will be more happy :)

Add Jquery library to your site first:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Copy this code


Add this code into script tag in the end of body:

      $(function() {
        $(window).scroll(function() {
          if ($(this).scrollTop() != 0) {
            $("#toTop").fadeIn();
          } else {
            $("#toTop").fadeOut();
          }
        });
        $("#toTop").click(function() {
          $("body,html").animate({ scrollTop: 0 }, 800);
        });
      });
Copy this code


Add to body this element:

<div id="toTop"></div>
Copy this code


Css:

 #toTop {
  border: 1px solid #ccc;

  background: #f7f7f7;

  text-align: center;

  padding: 18px;

  border-radius: 5px;

  position: fixed; /* this is the magic */

  bottom: 10px; /* together with this to put the div at the bottom*/

  right: 10px;

  cursor: pointer;

  display: none;

  color: #333;

  font-size: 11px;
}

#toTop:before {
  content: "";

  position: Absolute;

  width: 0;

  height: 0;

  border: 11px solid transparent;

  border-bottom: 11px solid #099;

  left: 7px;

  top: -4px;
}

#toTop:after {
  content: "";

  position: Absolute;

  width: 10px;

  height: 12px;

  background-color: #099;

  left: 13px;

  top: 18px;
}
Copy this code


And roll your page to view your result: