¿Cuál es la forma más sencilla de hacer que el botón de desplazamiento hacia arriba no vaya al pie de página? Quiero que permanezca arriba del pie de página en todo momento, ya que planeo agregar enlaces y texto allí que eventualmente cubrirá. Debe detenerse justo antes de llegar al pie de página y no bajar más.
JSFiddle: https://jsfiddle.net/9s3kRT5tFBBHFVc8eT/9rwn1qub/5/
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: Arial, Helvetica, sans-serif; font-size: 20px; } #myBtn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; font-size: 18px; border: none; outline: none; background-color: red; color: white; cursor: pointer; padding: 15px; border-radius: 4px; } #myBtn:hover { background-color: #555; } footer { margin: 100px; } </style> </head> <body> <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> <div style="background-color:black;color:white;padding:30px">Scroll Down</div> <div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible <strong>when the user starts to scroll the page</strong>.</div> <footer> This is a footer </footer> <script> //Get the button var mybutton = document.getElementById("myBtn"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } </script> </body> </html> //Get the button var mybutton = document.getElementById("myBtn"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() { scrollFunction() }; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } // check that button is not lower than footer. let footerElement = document.getElementById('footer'); let footerElementRect = footerElement.getBoundingClientRect(); let mybuttonPositionBottom = mybutton.offsetTop + mybutton.offsetHeight; if (footerElementRect.y < mybuttonPositionBottom) { // if button is lower than footer. // modify css bottom. let diffheight = mybuttonPositionBottom - footerElementRect.y; let style = window.getComputedStyle(mybutton); let addBottom = parseInt(style.getPropertyValue('bottom')) + diffheight; mybutton.style.bottom = addBottom + 'px'; // maybe add more 10 px for bottom space of a button. } else { // if button is heigher than footer. this including scroll up. // remove custom css bottom. mybutton.style.bottom = ''; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 20px; } #myBtn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; font-size: 18px; border: none; outline: none; background-color: red; color: white; cursor: pointer; padding: 15px; border-radius: 4px; } #myBtn:hover { background-color: #555; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> <div style="background-color:black;color:white;padding:30px">Scroll Down</div> <div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible <strong>when the user starts to scroll the page</strong>.</div> <div id="footer"> This is footer. </div> </body> </html>