Question

我按照此处的代码codepen.io/rdallaire/pen/apoyx进行操作，并将源代码成功实现到我的网站中。

除了一个问题之外，一切都很好。在我上面列出的网站上，滚动到40px后会出现“滚动到顶部”元素，但是，在我的网站上，只有滚动到最底部才能访问该元素，并且我无法弄清楚为什么当我的页面上的行为不同时，代码是相同的。

滚动到最底部，您将看到滚动到顶部元素。 https://bymw.github.io/

IMG: Here is the scroll to top element 支持将不胜感激，谢谢大家！

HTML：

  <a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>

CSS：

/* —— SCROLL TO TOP */

#return-to-top {
  display               : none;
  display               : block;
  position              : fixed;
  right                 : 20px;
  bottom                : 20px;
  width                 : 50px;
  height                : 50px;
  -moz-border-radius    : 35px;
  -webkit-border-radius : 35px;
  border-radius         : 35px;
  background            : rgb(0, 0, 0);
  background            : rgba(0, 0, 0, 0.7);
  text-decoration       : none;
  -moz-transition       : all 0.3s ease;
  -ms-transition        : all 0.3s ease;
  -o-transition         : all 0.3s ease;
  -webkit-transition    : all 0.3s linear;
  transition            : all 0.3s ease;
}

#return-to-top i {
  position           : relative;
  top                : 13px;
  left               : 16px;
  margin             : 0;
  color              : #fff;
  font-size          : 19px;
  -moz-transition    : all 0.3s ease;
  -ms-transition     : all 0.3s ease;
  -o-transition      : all 0.3s ease;
  -webkit-transition : all 0.3s ease;
  transition         : all 0.3s ease;
}

#return-to-top:hover {
  background : rgba(0, 0, 0, 0.9);
}

#return-to-top:hover i {
  top   : 5px;
  color : #fff;
}

JavaScript：

// ===== Scroll to Top ====
$(window).scroll(function() {
    if ($(this).scrollTop() >= 40) {        // If page is scrolled more than 40px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
});
$('#return-to-top').click(function() {      // When arrow is clicked
    $('body,html').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});

Answer 1

这归因于transform: translateZ(0);元素上的body。删除它，固定的“滚动到顶部”按钮将按预期工作。

那为什么会发生这种情况？

让我们来看看transform的{{3}}，特别是以下段落；

对于其布局由CSS box模型控制的元素，任何值除了没有其他变换之外，还会导致元素变为包含块，并且该对象充当固定的包含块定位的后代。

简而言之，这告诉我们，fixed元素变为固定于转换后的元素（在您的情况下为body元素），而不是设备视口。

还有正在进行的错误报告，讨论是否有必要采取这种特定行为，您可以阅读其中的W3C specifications。

您可能还希望在z-index元素上添加高数字的#return-to-top，以确保它始终位于其他元素的顶部。

滚动后，滚动到顶部的元素不会出现-它固定在底部

1 个答案:

那为什么会发生这种情况？