Back-to-top button

One of the first functionalities to implement, that went beyond the editor’s in-built abilities, was the back-to-top button. It is the bee in the bottom right corner. It appears if a page exceeds a certain scroll length and disappears if the viewer is near the top of the page. Upon clicking the bee, a buzzing sound is made and the page quickly scrolls back to the top. This, apart from it being a bee, is a common feature on websites with long pages and it should be more common in my opinion, as it is very handy. Sure my header with the menu is sticky, which means it comes back if you scroll up, but having that little extra way, just a click away, to be back at the top is grand. Especially if it is a cute bee that makes a noise when disturbed. Below I present the code which makes it possible:

HTML:

<div id="scroll-here"></div>
<div id="beeContainerBottom">
<a id="back-to-top" href="#scroll-here"></a>
</div>

JAVASCRIPT:

document.addEventListener('DOMContentLoaded', function() {
var beesUpAudio = new Audio('https://static1.squarespace.com/static/6654b2fee26f292de13f1a9d/t/66958d727cdd33076182ed01/1721077108416/Bees1.mp3/original/Bees1.mp3');
beesUpAudio.preload = 'auto';
beesUpAudio.playbackRate = 1.2; 
beesUpAudio.volume = 0.3;
const content = document.querySelector(".content");
const beeContainerBottom = document.getElementById('beeContainerBottom');
content.appendChild(beeContainerBottom);
$(function(){
function showBackToTop(){
$('#back-to-top').addClass('show-btt');
}
function hideBackToTop(){
$('#back-to-top').removeClass('show-btt');
}
function checkScrollPos(){
if ($(this).scrollTop() >= 300) {
showBackToTop();
} else {
hideBackToTop()
}
}
$('#back-to-top').click(function(){
beesUpAudio.play();
$(window).scrollTop(0)});
$(window).on('scroll', function(){
checkScrollPos();
});
checkScrollPos();
})
});

CSS:

#beeContainerBottom {
  width: 100%;
  position: relative;
  margin: 0 auto;
  display: flex;
  box-sizing: border-box;
  justify-content: right;
  max-width: 2200px;
  padding-left: 3vw;
  padding-right: 3vw;
}
#back-to-top{
  height:70px;
  width:70px;
  position:fixed;
  z-index:9999;
  border:0;
  margin-bottom: 1%;
  margin-right: -10px;
  background-image: url(https://static1.squarespace.com/static/6654b2fee26f292de13f1a9d/t/6664f35b4014e740a4ae7a59/1717891931682/BeeiconYellow2.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent !important;
  /*Position Out of View*/
  bottom:-150px;
  opacity:0;
  transition: all .5s ease;
}
  /*Position In View*/
#back-to-top.show-btt{
  bottom:0;
  opacity:1;
  transition: all .5s ease;
}

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