如何在.story容器内放置固定返回顶部按钮并定位至右边界内侧14px

嘿，我完全懂你要实现的效果——让回到顶部按钮牢牢固定在.story容器的右内侧，不随内容滚动，同时点击能把容器内的内容平滑滚回顶部。默认position:fixed是相对视口定位的，所以直接写right:14px会让按钮贴在浏览器窗口右边，而不是你想要的容器内侧。这里有两个实用的解决方案：

方案一：纯CSS实现（适合固定宽度百分比的容器） #

你的.story设置了width:50%且居中显示，我们可以用calc()精准计算按钮的right值：

• 容器居中后，它的右边界距离视口右边缘的距离是(100vw - 50vw)/2 = 25vw
• 要让按钮在容器右内侧14px的位置，我们需要把按钮的right设为calc(25vw + 14px)（right属性是元素右侧到视口右侧的距离，这样计算后按钮会刚好卡在容器右边界内侧14px处）

修改后的CSS代码：

.story{ 
  position:relative; 
  width:50%; 
  margin:0 auto; 
  height:100vh; 
  background:#ddd; 
  overflow-y:scroll; 
} 
.gotop{ 
  position:fixed; 
  /* 关键：动态计算相对于视口的right值 */
  right: calc(25vw + 14px); 
  bottom:0; 
  padding:14px 9px; 
  background:gold; 
  border-radius:45% 45% 0 0; 
  cursor:pointer; 
}

方案二：JavaScript动态计算（适配容器宽度变化场景） #

如果你的容器宽度会随屏幕尺寸调整（比如响应式布局），纯CSS的百分比计算可能会失效，这时候用JS动态计算更可靠：

第一步：添加JS代码实现定位+滚动功能 #

// 获取目标元素
const storyContainer = document.querySelector('.story');
const goTopBtn = document.querySelector('.gotop');

// 计算并设置按钮的right值
function setBtnPosition() {
  // 获取容器右边界相对于视口的坐标
  const containerRight = storyContainer.getBoundingClientRect().right;
  // 计算按钮需要的right值：视口宽度 - 容器右边界坐标 + 14px（内侧偏移量）
  const rightValue = window.innerWidth - containerRight + 14;
  goTopBtn.style.right = `${rightValue}px`;
}

// 页面加载时初始化，窗口 resize 时重新计算
window.addEventListener('load', setBtnPosition);
window.addEventListener('resize', setBtnPosition);

// 点击按钮滚动到容器顶部（可选平滑滚动）
goTopBtn.addEventListener('click', () => {
  storyContainer.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

第二步：调整原有CSS（移除固定right值，由JS控制） #

.story{ 
  position:relative; 
  width:50%; 
  margin:0 auto; 
  height:100vh; 
  background:#ddd; 
  overflow-y:scroll; 
} 
.gotop{ 
  position:fixed; 
  bottom:0; 
  padding:14px 9px; 
  background:gold; 
  border-radius:45% 45% 0 0; 
  cursor:pointer; 
  /* 移除原来的right:14px，交给JS动态设置 */
}

小提醒 #

• 用CSS方案时，如果容器有padding或border，记得把这些值也加入calc()的计算中，避免定位偏移
• JS方案会自动处理容器的内边距、边框以及窗口大小变化的情况，兼容性和灵活性更好

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