0

I have the following code for scroll to top, which work fine when click to scroll to top. The problem I am having with the scroll to top button should always be positioned at the bottom corner of the page when there is no page footer and when there is a page footer i want it positioned 20px above the page footer.

How do i do that correctly?.

here is my code below and fiddle link here FIDDLE here

JS

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    }); 

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

CSSS

.scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:250px;
    right:100px;
    display:none;
    text-indent:-9999px;
    background: url('icon_top.png') no-repeat;
}
user244394
  • 11,888
  • 20
  • 71
  • 128

2 Answers2

1

First you ll have to check if footer exists in document. And then if footer is visible in your broswer you have to adjust the position of your scroll link

Check out the sollution to this question -> Check if element is visible after scrolling

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<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>

a working example here : https://jsfiddle.net/00f7p7ay/1/

Community
  • 1
  • 1
skpapam
  • 156
  • 7
0

For the first part of your question:

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

See the updated Fiddle

Not sure about the second part at the moment.

Yass
  • 2,600
  • 3
  • 11
  • 21