to-Bottom button

To-Bottom button is slightly more complicated than the back-to-top button, but not by much. It allows the user to instantly scroll to the bottom of a potentially long page. Right now you can see the bee hanging out in the top left corner, that’s the button I am talking about. Remember that at this point in time my knowledge of Javascript is minimal. I did need to keep in mind that the websites nowadays are responsive, which means they should adapt to different device screens and input styles. Hence using an observer to monitor if the mobile menu is open and making the bee fly away during that time, for aesthetic reasons.

EDIT:
I upgraded the code to monitor page height, in case elements are added dynamically which increase the page height.

HTML:

<div id="scroll-there"></div>
<div id="beeContainerTop">
<a id="back-to-bottom" href="#scroll-there"></a>
</div>

JAVASCRIPT:

document.addEventListener('DOMContentLoaded', function() {
var beesAudio = new Audio('https://static1.squarespace.com/static/6654b2fee26f292de13f1a9d/t/66958d727cdd33076182ed01/1721077108416/Bees1.mp3/original/Bees1.mp3');
beesAudio.preload = 'auto';
beesAudio.playbackRate = 1;
beesAudio.volume = 0.3;
const content = document.querySelector(".header-nav-list");
const beeContainerTop = document.getElementById('beeContainerTop');
const burgerButton = document.querySelector('.header-burger-btn');
const mobileCartIcons = document.querySelectorAll('.header-actions-action--cart');
var mobileMenuActive = false;
var pageHeight = 0;
//basic class mods
function showBackToBottom() {
document.getElementById('back-to-bottom').classList.add('show-butt');
}
function hideBackToBottom() {
document.getElementById('back-to-bottom').classList.remove('show-butt');
}
//condition for when bee is here
function checkScrollPos() {
if (window.scrollY <= 160 && pageHeight >= window.innerHeight + 800 && mobileMenuActive == false) {
showBackToBottom();
} else {
hideBackToBottom();
	}
}
//dynamic monitoring of page height
function updatePageHeight() {
pageHeight = document.documentElement.scrollHeight;
}
// Monitor if mobile menu is open
const observerCallback = function(mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
if (burgerButton.classList.contains('burger--active')) {
mobileMenuActive = true;
mobileCartIcons.forEach(function(mobileCartIcon) {
mobileCartIcon.classList.add('menuOpen');
});
document.getElementById('back-to-bottom').classList.remove('show-butt');
} else {
mobileMenuActive = false;
mobileCartIcons.forEach(function(mobileCartIcon) {
mobileCartIcon.classList.remove('menuOpen');
});
checkScrollPos();
			}
		}
	}
};
const observer = new MutationObserver(observerCallback);
const config = { attributes: true };
observer.observe(burgerButton, config);
//main stuff
function my_function() {
function findHighestNode(nodesList) {
for (var i = nodesList.length - 1; i >= 0; i--) {
if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
pageHeight = Math.max(elHeight, pageHeight);
}
if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
	}
}
findHighestNode(document.documentElement.childNodes);
//click event
document.getElementById('back-to-bottom').addEventListener('click', function() {
beesAudio.play();
window.scrollTo(0, document.body.scrollHeight);
});
window.addEventListener('scroll', function() {
checkScrollPos();
});
checkScrollPos();
// MutationObserver to track changes in the DOM for page height
const domObserver = new MutationObserver(function(mutationsList) {
mutationsList.forEach(function(mutation) {
if (mutation.type === 'childList') {
updatePageHeight();
checkScrollPos();
		}
	});
});
// Observe changes in the entire document
domObserver.observe(document.body, { childList: true, subtree: true });
}
if (window.attachEvent) {
window.attachEvent('onload', my_function);
} else if (window.addEventListener) {
window.addEventListener('load', my_function, false);
} else {
document.addEventListener('load', my_function, false);
  }
});

CSS:

#beeContainerTop {
  width: 100%;
  position: relative;
  margin: 0 auto;
  display: flex;
  box-sizing: border-box;
  justify-content: left;
  max-width: 2200px;
  padding-left: 3vw;
  padding-right: 3vw;
}
#back-to-bottom {
  height:65px;
  width:65px;
  scale: 1.1;
  position:fixed;
  z-index:9999;
  border-radius:0%;
  margin-left: -10px;
  margin-top: 5px;
  background-image: url(https://static1.squarespace.com/static/6654b2fee26f292de13f1a9d/t/667f25d3015586177842c716/1719608787700/BeeiconYellow2+Reversed.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent !important;
  @media screen and (max-width:790px) {
    left:15px;
    scale: 1;
    margin-top: 10px;
  }
  /*Position Out of View*/
  top: -300px;
  opacity:0;
  transition: all .8s ease;
}
  /*Position In View*/
#back-to-bottom.show-butt{
  top: 10px;
  opacity:1;
  transition: all .8s ease;
}

Here you have some HTML, followed by JS and CSS. This is all that there is to it to show the to-bottom bee.