回到顶部按钮出现时触发WhatsApp按钮CSS平滑上移动画实现求助

核心逻辑是给WhatsApp按钮添加位移过渡属性，同时监听回到顶部按钮的显示状态，动态控制WhatsApp按钮的位置，实现平滑移动效果。

第一步：添加CSS过渡样式 #

先给WhatsApp按钮配置位移动画，把代码加入你站点的自定义CSS文件即可：

/* 请将.social-chat-whatsapp替换为你站点WhatsApp按钮的实际选择器 */
.social-chat-whatsapp {
  /* 保留原有position: fixed、right等定位属性不变 */
  transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 定义底部位移的平滑过渡效果 */
  bottom: 20px; /* 回到顶部按钮隐藏时的默认底部距离，可按需调整 */
}

/* 回到顶部按钮显示时，WhatsApp按钮的上移状态类 */
.social-chat-whatsapp.shift-up {
  bottom: 70px; /* 上移后的底部距离，数值根据回到顶部按钮高度+间距调整即可 */
}

第二步：添加交互控制逻辑 #

以下提供两种通用实现方案，按需选择一种加入站点自定义JS文件即可：

方案1：滚动监听（通用度最高） #

适合不清楚回到顶部按钮显示逻辑的场景，通过监听滚动事件判断按钮可见性：

// 替换为你站点两个按钮的实际选择器
const backToTopBtn = document.querySelector('.back-to-top');
const whatsappBtn = document.querySelector('.social-chat-whatsapp');

window.addEventListener('scroll', () => {
  // 判断回到顶部按钮是否处于可见状态
  const btnIsVisible = window.getComputedStyle(backToTopBtn).display !== 'none' 
                      && window.getComputedStyle(backToTopBtn).opacity > 0;
  btnIsVisible ? whatsappBtn.classList.add('shift-up') : whatsappBtn.classList.remove('shift-up');
});

方案2：属性监听（性能更优） #

如果回到顶部按钮是通过添加类（如show）控制显示的，使用MutationObserver监听属性变化即可，无需持续触发滚动事件：

// 替换为你站点两个按钮的实际选择器
const backToTopBtn = document.querySelector('.back-to-top');
const whatsappBtn = document.querySelector('.social-chat-whatsapp');

const observer = new MutationObserver((mutations) => {
  mutations.forEach(item => {
    if (item.attributeName === 'class') {
      // 把show替换为你站点回到顶部按钮显示时的实际类名
      const btnIsVisible = backToTopBtn.classList.contains('show');
      btnIsVisible ? whatsappBtn.classList.add('shift-up') : whatsappBtn.classList.remove('shift-up');
    }
  })
})

// 监听回到顶部按钮的类属性变化
observer.observe(backToTopBtn, { attributes: true });

注意事项 #

• 可通过浏览器F12开发者工具的元素选择器，点击对应按钮获取准确的元素选择器
• 上移后的bottom数值可根据实际效果调整，一般设置为「回到顶部按钮高度 + 两个按钮的期望间距」即可
• 过渡动画的时长（示例为0.3s）和缓动函数可根据站点整体风格自行调整

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