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:

  


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


Add to body this element:



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


© 2019 4codev

Created with love by Sil.