Question

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

我该怎么做？

这是我的代码，这里是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;
}

Answer 1

首先，您必须检查文档中是否存在页脚。然后，如果您的broswer中显示页脚，则必须调整滚动链接的位置

查看此问题的解决方案 - ＆gt; Check if element is visible after scrolling

mvn verify -Dinvoker.test=first-test

    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}

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

Answer 2

问题的第一部分：

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

查看更新后的Fiddle

目前对第二部分不确定。

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

2 个答案: