JS新手求助：能否根据光标位置调整返回顶部按钮的位置？

没问题，刚接触JS的话，其实用几个基础的API就能实现这个需求，给你列一下关键的几个点：

• 监听鼠标移动事件：用addEventListener给window绑定mousemove事件，这样每次鼠标移动时都能触发回调函数获取光标位置。
• 获取光标位置与视口宽度：在事件回调里，通过事件参数（通常叫e或者event）的clientX属性拿到光标相对于浏览器视口的水平坐标；用window.innerWidth获取当前视口的宽度，这样就能判断光标在视口的左半区还是右半区。
• 动态修改按钮位置：
  • 直接修改行内样式：通过按钮元素的style属性，比如button.style.right = '20px'或者button.style.left = '20px'来切换位置；
  • 或者用CSS类切换：提前写好两个不同位置的CSS类（比如.btn-right和.btn-left），然后用元素的classList.add()和classList.remove()来切换类名，这种方式更符合样式与逻辑分离的原则。

给你个极简逻辑示例帮你理解（不用完整代码，核心逻辑就是这样）：

// 假设按钮元素是const backToTopBtn = document.getElementById('backToTop');
window.addEventListener('mousemove', (e) => {
  const viewportHalfWidth = window.innerWidth / 2;
  if (e.clientX > viewportHalfWidth) {
    // 光标在右侧，切换按钮到右侧位置
    backToTopBtn.classList.add('btn-right');
    backToTopBtn.classList.remove('btn-left');
  } else {
    // 光标在左侧，切换按钮到左侧位置
    backToTopBtn.classList.add('btn-left');
    backToTopBtn.classList.remove('btn-right');
  }
});

这些都是JS的基础API，你可以先逐个熟悉用法，再慢慢调试调整~

内容的提问来源于stack exchange，提问作者Somebody