滾動到頂部元素不會在滾動后出現 - 它固定在底部

Question

我按照這里的代碼 codepen.io/rdallaire/pen/apoyx 並成功地將源代碼實現到我的網站中。

除了一個問題外，一切都很好。 在我上面列出的網站上，滾動到頂部元素會在滾動 40 像素后出現，但是，在我的網站上，只有滾動到最底部才能訪問該元素，而且我無法弄清楚為什么我的頁面上的行為不同時代碼是相同的。

滾動到最底部，您將看到滾動到頂部元素。 https://bymw.github.io/

IMG：這是滾動到頂部元素的支持將不勝感激，謝謝大家！

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元素上。 刪除它，固定的“滾動到頂部”按鈕將按預期工作。

那么為什么會發生這種情況呢？

我們來看看W3C對transform規范，具體如下一段；

對於布局由 CSS 盒模型控制的元素，除了 none 之外的任何轉換值也會導致元素成為包含塊，並且該對象充當固定定位后代的包含塊。

簡而言之，這告訴我們固定元素固定到轉換后的元素（在您的情況下為body元素），而不是設備視口。

還有一個正在進行的錯誤報告討論是否需要這種特定行為，您可以在此處閱讀。

您可能還想在#return-to-top元素上添加一個較大的z-index ，以確保它始終位於其他元素的頂部。