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

function isScrolledIntoView(elem)
{
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
    
    $(window).scroll(function() {
      if ($(this).scrollTop() > 100) {
        if($("footer").length){
        	if(isScrolledIntoView($("footer"))){
          	$('.scrollup').css("bottom",$("footer").outerHeight() +"px")
          }
          else{
          	$('.scrollup').css("bottom","0px")
          }
        }
        $('.scrollup').fadeIn();
      } else {
        $('.scrollup').fadeOut();
      }
    });

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