scroll to top

scroll to top

HTML

<p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p><p>
lorem ipsum lorem ipsum
</p>
<a href="#" class="scrollup" style="display:none">Scroll</a>

CSS

.scrollup {
  width: 40px;
  height: 40px;
  opacity: 0.3;
  position: fixed;
  bottom: 0;
  right: 0;
  display: block;
  text-indent: -9999px;
  background: url('icon_top.png') no-repeat;
  border: 1px solid red;
  background-color:red;
  content:UP;
}

/*    position: fixed;
    bottom: 0;
    display: none;
    right: 0;
    background: rgba(0,0,0,.8);
    color: #fff;
    padding: 9px 22px;
        border-top-left-radius: 5px;
    font-size: .85rem;
    line-height: 1.2rem*/

JavaScript

$(window).scroll(function() {
      if ($(this).scrollTop() > 100) {
        $('.scrollup').fadeIn();
      } else {
        $('.scrollup').fadeOut();
      }
    });

    $('.scrollup').click(function() {
      $("html, body").animate({
        scrollTop: 0
      }, 600);
      return false;
    });