Проблемы с отображением кнопки «Вернуться наверх» ⇐ CSS

[Anonymous]

Я столкнулся с проблемой отображения этой кнопки, которая появляется при загрузке страницы даже без ее прокрутки.
Во-вторых, я не могу изменить форму стрелки внутри для более стандартная и толстая версия.
Зная, что этот код должен оставаться на одной странице в том виде, в каком он представлен, учитывая, что это интеграция с сайтом без кода.
Как решить эти две проблемы?
document.addEventListener('contextmenu', event => event.preventDefault());
document.onselectstart = () => { event.preventDefault(); }
.BTT-button {
z-index: 20;
display: flex;
position: fixed;
bottom: 1.5vw;
right: 2rem;
width: 3rem;
height: 3rem;
background: white;
transition: 0.5s;
justify-content: center;
align-items: center;
border-radius: 21px;
transform: rotate(90deg);
box-shadow: 1px -2px 6px #766E6E;
cursor: pointer;
}
html {
scroll-behavior: smooth;
}


const topButton = document.createElement('div');
topButton.innerHTML = ' < '
document.body.append(topButton);
let mybutton = document.querySelector(".BTT-button");
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.opacity = "1";
} else {
mybutton.style.opacity = "0";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
if (document.querySelector('.whats-app-bubble')) {
mybutton.style.bottom = '6rem';
}
.whats-app-bubble { right: 100px !important; width: 64px !important; }


Подробнее здесь: https://stackoverflow.com/questions/786 ... top-button