Squarespace滚动跟随式返回顶部按钮CSS定制请求

以下是符合需求的完整实现代码，包含HTML、CSS和JavaScript部分：

HTML 结构 #

<button id="backToTop" class="back-to-top">^</button>

CSS 样式 #

.back-to-top {
  position: fixed;
  /* 固定在右侧20px位置 */
  right: 20px;
  /* 垂直居中 */
  top: 50%;
  transform: translateY(-50%);
  /* 圆形外观 */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: #333;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  /* 初始隐藏按钮 */
  opacity: 0;
  visibility: hidden;
  /* 过渡动画让显示/隐藏更平滑 */
  transition: all 0.3s ease;
}

/* 按钮显示状态 */
.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* 鼠标悬停时的颜色变化 */
.back-to-top:hover {
  background-color: #555;
}

JavaScript 逻辑 #

const backToTopBtn = document.getElementById('backToTop');

// 监听页面滚动，控制按钮显示/隐藏
window.addEventListener('scroll', () => {
  // 当页面滚动超过300px时显示按钮，可根据需求调整这个值
  if (window.scrollY > 300) {
    backToTopBtn.classList.add('show');
  } else {
    backToTopBtn.classList.remove('show');
  }
});

// 点击按钮平滑返回顶部
backToTopBtn.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

关键说明 #

• 固定定位结合top:50%和transform: translateY(-50%)实现按钮在页面右侧垂直居中，不会随滚动位移
• 通过滚动距离判断按钮的显示状态，避免页面顶部就出现按钮影响视觉
• smooth滚动行为提供更友好的返回体验，主流浏览器都支持
• 可以根据需求调整按钮的尺寸、颜色、滚动触发阈值等参数

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