Scroll to the top element does not appear after scrolling - its fixed on the bottom

Question

I followed the code here codepen.io/rdallaire/pen/apoyx and successfully implemented the source into my site.

Everything works just fine apart from one problem. On the site I listed above, the scroll to top element appears after scrolling 40px, however, on my site the element can only be accessed if you scroll to the very bottom and I cannot figure out why the behavior is different on my page when the code is identical.

Scroll to the very bottom, and you will see the scroll to top element. https://bymw.github.io/

IMG: Here is the scroll to top element Support would be much appreciated, thank you all!

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

This is due to the transform: translateZ(0); on the body element. Remove this, and the fixed "scroll to top" button will work as expected.

So why does this happen?

Let's take a look at the W3C specifications for transform , specifically the following paragraph;

For elements whose layout is governed by the CSS box model, any value other than none for the transform also causes the element to become a containing block, and the object acts as a containing block for fixed positioned descendants.

In short, this is telling us that the fixed element becomes fixed to the transformed element (in your case, the body element), instead of the devices viewport.

There is also an ongoing bug report discussing if this specific behaviour is necessary, of which you can read HERE .

You may also want to add a z-index of a high number on the #return-to-top element to make sure it is always on top of other elements.