scroll to top

scroll to top

by dev2020

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">Scroll</a>
<!-- footer --->
<footer>
<h2>
This is the footer. up arrow should be alway above the footer . 
</h2>  
  </footer>
</footer>

CSS

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

JavaScript

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

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