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

时间:2018-04-12 11:43:50

标签: html css button position cursor

我还是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; 
}

1 个答案:

答案 0 :(得分:1)

使用mousehover事件并获取指针的x和y坐标。现在使用window.innerWidth获取屏幕的总宽度,现在使用指针的x位置确定i指针是哪个,并相应地改变css。如果您需要更多帮助,我可以帮助您