I am encountering a display problem for this button which appears when loading the page even without having scrolled on it.
Secondly I can’t change the shape of the arrow inside for a more standard and thick version.
Knowing that this code must remain on a single page as presented given that it is an integration into a no code site
How to solve these two problems ?
<code><script> document.addEventListener('contextmenu', event => event.preventDefault()); </script>
<script> document.onselectstart = () => { event.preventDefault(); } </script><style>
.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;
}
</style>
<script>
const topButton = document.createElement('div');
topButton.innerHTML = '<button onclick="topFunction()" class="BTT-button" title="Go to top"> < </button>'
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';
}
</script><style> .whats-app-bubble { right: 100px !important; width: 64px !important; } </style>
</code>
<code><script> document.addEventListener('contextmenu', event => event.preventDefault()); </script>
<script> document.onselectstart = () => { event.preventDefault(); } </script><style>
.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;
}
</style>
<script>
const topButton = document.createElement('div');
topButton.innerHTML = '<button onclick="topFunction()" class="BTT-button" title="Go to top"> < </button>'
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';
}
</script><style> .whats-app-bubble { right: 100px !important; width: 64px !important; } </style>
</code>
<script> document.addEventListener('contextmenu', event => event.preventDefault()); </script>
<script> document.onselectstart = () => { event.preventDefault(); } </script><style>
.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;
}
</style>
<script>
const topButton = document.createElement('div');
topButton.innerHTML = '<button onclick="topFunction()" class="BTT-button" title="Go to top"> < </button>'
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';
}
</script><style> .whats-app-bubble { right: 100px !important; width: 64px !important; } </style>