I’ve been trying to decouple my projects from dependencies and libraries as much as I can lately. It not only gives me a good opportunity to exercise some skills I have been neglecting but having the extra control over bugs and errors is also a welcome addition. My latest adventure was the need to create a Back to Top button that would only show up after a specific element was on the page, and would then disappear when scrolled past a boundary Container. Here is the basic acceptance criteria: A top container triggers the button visibility state to true when intersecting the viewport A Bottom Container removes the visible state from the button Vanilla JS only Back to Top button has a subtle opacity transition when changing states Back to Top button cannot be clickable when hidden With these basic conditions given, let’s stretch our coding muscles and bootstrap this solution! Understanding the problem Considering our markup to be composed of a Back to Top Button #back-to-top, a top container #section-top, and a bottom container #section-bottom, let’s start by storing pointer references to these DOM Elements: const btn = document.querySelector(“#back-to-top”); const topSection = document.querySelector(“#section-top”); const bottomSection = document.querySelector(“#section-bottom”); Our first step is finding where both our section elements will intersect the page scroll flow. It seems like a simple task as you can state it as just find their scroll position value relative to the vertical space available on the page!. Well, this is the solution itself, but JavasScript doesn’t provide a specific method to find these values straight away. Instead, it provides a lot of helper methods available at the object level to deal with these types of calculations. const topScrollTreshold = topSection.getBoundingClientRect().top window.pageYOffset The getBoundingClientRect method can be called from a DOM element (in this case, the topSection) and will return a DOMRect object with properties that describe its size and its position relative to the viewport: One important thing to consider is that the position properties (top, left, and so forth) returned by this method are relative to the viewport and are not aware of our total page height, which is fundamental for us to understand when the Back to Top button should show up. To work around this issue, we add the top value of our element to the current scroll position by accessing window.PageYOffset. Property names are also important here: window.pageYOffset is the same as window.scrollY, but it has native support on IE. A more in-depth look of the values getBoundingClientRect can also teach us that padding and border-width are added to the total width/height values if we’re using the standard box model: Making use of box-sizing: border-box is a way to get rid of this behaviour, but for our case just being mindful of this rule is enough. Observing if we’re already past the containers As a way of streamlining this process, we’re going to add a conditional logic to our topScrollTreshold so it returns a boolean. We’re now planning on making these variables live inside a scroll window event, so every time users scroll the variables will be checked and return a new set of values: window.addEventListener(“scroll”, function (e) { const topScrollTreshold = topSection.getBoundingClientRect().top window.pageYOffset bottomSection.getBoundingClientRect().top window.pageYOffset; Back to our requirements: A bottom container removes the visible state from the button There is a chance that nothing will live below the Bottom container and it will never reach the top of the page.  » Read More

The post Building a Simple Back to Top Button Trigger with CSS and JavaScript appeared first on Fresh For Designers..