Botão flutuante do whatsapp e voltar ao topo

Botão flutuante do whatsapp e voltar ao topo

<button id="btnTopo" class="btn-topo" onclick="voltarAoTopo()">&#8679;</button>

<div id="whatsapp-icon" class="whatsapp-icon">
<a href="">
<img src="SEU ICONE AQUI" alt="WhatsApp" width="50" height="50">
</a>
</div>

<script>
window.onscroll = function() {
let btnTopo = document.getElementById("btnTopo");
if (document.documentElement.scrollTop > 200) {
btnTopo.style.display = "block";
} else {
btnTopo.style.display = "none";
}
};

function voltarAoTopo() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}

let whatsappIcon = document.getElementById('whatsapp-icon');
let isDragging = false; //INICIA FALSO PQ ESTA PARADO
let offsetX, offsetY; //PEGA A POSIÇÃO DO ICON

//SE O BOTÃO DO MOUSE FOR PRESSIONADO
whatsappIcon.addEventListener('mousedown', (event) => {
isDragging = true; //AO CLIQUE DO MOUSE isDragging PASSA A SER VERDADEIRO ENQUANTO ESTIVER SENDO ARRASTADO
offsetX = event.clientX - whatsappIcon.getBoundingClientRect().left;
offsetY = event.clientY - whatsappIcon.getBoundingClientRect().top;
whatsappIcon.style.cursor = "grabbing";
});

//DETECTA SE O MOUSE ESTA EM MOVIMENTO
document.addEventListener('mousemove', (event) => {
if (isDragging) {
//ENQUANTO ESTIVER isDragging VAMOS ARMAZENAR AS NOVAS POSIÇÕES DO ICONE
let x = event.clientX - offsetX;
let y = event.clientY - offsetY;
whatsappIcon.style.left = x + "px";
whatsappIcon.style.top = y + "px";
whatsappIcon.style.position = "fixed";
}
});

//DETECTA SE O CLICK DO MOUSE FOI LIBERADO
document.addEventListener('mouseup', () => {
//E POR FIM O MOUSE SENDO LIBERADO isDragging VOLTA A SER FALSO PARA SE MANTER FIXO NA ÚLTIMA POSIÇÃO
isDragging = false;
whatsappIcon.style.cursor = "grab";
});
</script>