I know how to show 'back to top' button after scrolling 100px from the top of the window, but I want to show it after scrolling down 100px (for example) from a certain <section>/<div> and I couldn't find a solution. I have a text and the images above it, the text is in one section, the images are in another, so I want the button to fade in after scrolling 100px from the section with images and to stop 100px from the end of the same section.
$(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>I developed a solution using getPosition() method developed by @ShawnWhinnery. Also, I assigned a fixed value to the position style inside the .back-to-top class style. If you want to hide the <button> when the end of the <section> element is reached, you can follow the same logic; in this case, just calculate the height of the <section> element.
$(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>First you must make a button position fixed in CSS to appear when you scroll in a full page like this :
.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;
}
and In jquery use just fadeIn or fadeOut not fadeOut().hide()
and to animate it use fadeIn(milliSeconds)
Jquery code will be like this:
$(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);
}
});
});