Html 我可以根据光标位置更改按钮位置吗？

我还不熟悉javascript，所以不幸的是，我还没有意识到其中的正确命令。 我有这个代码，有一个按钮可以滚动到顶部，我想知道是否有办法根据光标的位置改变按钮的位置？例如，如果光标位于站点的右侧，则按钮将显示在右侧。 如果代码很长，我不希望您自己编写代码，如果您能告诉我需要使用哪些命令，那么我就可以自己尝试了

我感谢任何帮助

<button onclick="topFunction()" id="topB" title="Go to top">Top</button>



#topB {
display: none; 
position: fixed; 
bottom: 20px; 
right: 30px; 
z-index: 99; 
border: none; 
outline: none; 
background-color: gray; 
color: white; 
cursor: pointer; 
padding: 15px;
border-radius: 10px;
font-size: 18px; 
}

#topB:hover {
color:black;
background-color: red; 
}


window.onscroll = function() {scrollFunction()};

function scrollFunction() {
// After scrolling down "number"px, the button appears
if (document.body.scrollTop >= 10 || document.documentElement.scrollTop >= 
10) {
    document.getElementById("topB").style.display = "block";
} else {
    document.getElementById("topB").style.display = "none";
}
}
function topFunction() {
// Scrolls to the top on click
document.body.scrollTop = 0; 
document.documentElement.scrollTop = 0; 
}

顶部
#topB{
显示：无；
位置：固定；
底部：20px；
右：30px；
z指数：99；
边界：无；
大纲：无；
背景颜色：灰色；
颜色：白色；
光标：指针；
填充：15px；
边界半径：10px；
字号：18px；
}
#悬停{
颜色：黑色；
背景色：红色；
}
window.onscroll=function（）{scrollFunction（）}；
函数滚动函数（）{
//向下滚动“数字”px后，按钮出现
如果（document.body.scrollTop>=10 | | document.documentElement.scrollTop>=
10) {
document.getElementById（“topB”）.style.display=“block”；
}否则{
document.getElementById（“topB”）.style.display=“无”；
}
}
函数topFunction（）{
//单击可滚动到顶部
document.body.scrollTop=0；
document.documentElement.scrollTop=0；
}

使用鼠标悬停事件获取指针的x和y坐标。现在使用window获得屏幕的总宽度。innerWidth现在使用指针的x位置确定指针的一半，并相应地更改css。如果您需要更多帮助，我可以为您提供帮助。

对于初学者：。你可以根据事件隐藏和显示不同div上的按钮如果你不介意的话，可以帮我一点忙吗？所以我编写了这个代码（不是在6小时ofc中，现在只有空闲时间）

函数按钮更改（event）{var x=event.clientX；var y=event.clientY；if（xNevermind，解决了它，只需将右边替换为左边，在else部分将px设置为更高的数字（本例中为1800px）