Sé cómo mostrar el botón 'volver al principio' después de desplazarme 100px desde la parte superior de la ventana, pero quiero mostrarlo después de desplazarme 100px hacia abajo (por ejemplo) desde cierta <section> / <div> y no pude encuentra una solución. Tengo un texto y las imágenes encima, el texto está en una sección, las imágenes están en otra, así que quiero que el botón se desvanezca después de desplazarse 100px desde la sección con imágenes y detenerse 100px desde el final de la misma sección .
$(document).ready(function() { $('.back-to-top').hide(); var scrollBottom = $(".images").height() - 100; // stop the button 100px from the end of the section $(window).scroll(function() { if ($(".images").scrollTop() > 100) { $('.back-to-top').show().fadeIn(); } else { $('.back-to-top').fadeOut().hide(); } }); }); #images div { width: 100%; height: 300px; background: #d35276; } #images div:nth-child(odd) { background: #f1e264; } .back-to-top { padding: 20px; display: inline-block; text-decoration: none; background-color: #FFF; color: #000; border-radius: 50px; position: absolute; right: 50px; bottom: 50px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="top"></div> <section id="text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit enim ut leo pulvinar, ut viverra felis pharetra. Donec tincidunt orci sit amet consequat porttitor. Pellentesque vitae varius risus. Quisque iaculis vel purus vitae euismod. Pellentesque tincidunt justo eu nibh euismod fringilla. Integer iaculis tellus eget egestas faucibus. Aliquam at mi non leo luctus sodales ac eu ipsum. Curabitur id leo risus. Sed porttitor nec tellus non volutpat. Phasellus nec ornare ante, nec sodales quam. Donec a lectus semper, viverra metus eget, consectetur odio. Nulla scelerisque elit a arcu consequat lobortis. Donec non ipsum felis. Maecenas sem dolor, egestas a placerat fermentum, finibus vel mi. Etiam pretium orci eu nunc elementum, id rutrum tellus convallis.</p> </section> <section id="images"> <div></div> <div></div> <div></div> <div></div> <div></div> </section> <a href="#top" class="back-to-top">↑</a>Desarrollé una solución utilizando el método getPosition() desarrollado por @ShawnWhinnery . Además, asigné un valor fixed al estilo de position dentro del estilo de clase .back-to-top . Si desea ocultar el <button> cuando se alcanza el final del elemento <section> , puede seguir la misma lógica; en este caso, simplemente calcule la altura del elemento <section> .
$(document).ready(function() { $('.back-to-top').hide(); function getPosition(element) { var xPosition = 0, yPosition = 0; while(element) { xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft); yPosition += (element.offsetTop - element.scrollTop + element.clientTop); element = element.offsetParent; } return { x: xPosition, y: yPosition }; } $(window).scroll(function() { let staticPosition = getPosition(document.getElementById('images')).y; console.clear(); console.log(`Dif: ${this.scrollY - staticPosition} Scroll: ${this.scrollY} Element: ${staticPosition}`); if (this.scrollY - staticPosition > 100) $('.back-to-top').show().fadeIn(); else $('.back-to-top').fadeOut().hide(); }); }); #images div { width: 100%; height: 300px; background: #d35276; } #images div:nth-child(odd) { background: #f1e264; } .back-to-top { position: fixed; /* edited */ padding: 20px; display: inline-block; text-decoration: none; background-color: #FFF; color: #000; border-radius: 50px; right: 50px; bottom: 50px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="top"></div> <section id="text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit enim ut leo pulvinar, ut viverra felis pharetra. Donec tincidunt orci sit amet consequat porttitor. Pellentesque vitae varius risus. Quisque iaculis vel purus vitae euismod. Pellentesque tincidunt justo eu nibh euismod fringilla. Integer iaculis tellus eget egestas faucibus. Aliquam at mi non leo luctus sodales ac eu ipsum. Curabitur id leo risus. Sed porttitor nec tellus non volutpat. Phasellus nec ornare ante, nec sodales quam. Donec a lectus semper, viverra metus eget, consectetur odio. Nulla scelerisque elit a arcu consequat lobortis. Donec non ipsum felis. Maecenas sem dolor, egestas a placerat fermentum, finibus vel mi. Etiam pretium orci eu nunc elementum, id rutrum tellus convallis.</p> </section> <section id="images"> <div></div> <div></div> <div></div> <div></div> <div></div> </section> <a href="#top" class="back-to-top">↑</a>Primero debe hacer que una posición de botón sea fixed en CSS para que aparezca cuando se desplaza en una página completa como esta:
.back-to-top { position: fixed; right: 50px; bottom: 50px; padding: 20px; display: inline-block; text-decoration: none; background-color: #FFF; color: #000; border-radius: 50px; } y en jquery use solo fadeIn o fadeOut no fadeOut().hide() y para animarlo use fadeIn(milliSeconds)
El código Jquery será así:
$(document).ready(function() { console.log('Started') $('.back-to-top').hide(); $(window).scroll(function() { if ($(document).scrollTop() > 100) { $('.back-to-top').fadeIn(1000); console.log('More Than 100') } else { $('.back-to-top').fadeOut(1000); } }); });