jquery 滚动到顶部图标重叠页脚

Question

我有以下用于滚动到顶部的代码，当单击滚动到顶部时它工作正常。当没有页脚并且有页脚时，滚动到顶部按钮的问题应该始终位于页面的底 Angular ，我希望它位于页脚上方 20px 处。

我该如何正确地做到这一点？

下面是我的代码，这里是 fiddle 链接 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;
    });

CSS

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

Answer 1

首先，您必须检查文档中是否存在页脚。然后，如果页脚在您的浏览器中可见，您必须调整滚动链接的位置

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>

这里有一个工作示例:https://jsfiddle.net/00f7p7ay/1/