如何通过CSS实现向上箭头触达落地页图片时平滑消失的效果

你可以在原有代码基础上补充过渡规则与位置检测逻辑实现需求，完整修改后代码如下：

<!-- Start Bottom to scroll you up  -->
<div class="scrollUp">
  <a href="#header" id="button">
    <i class="fas fa-arrow-up"></i>
  </a>

  <style>
      /* 回到顶部按钮样式 */
      @keyframes mymove{
          100%{
              transform: translate(0px, -10px);
          }
      }
      #button {
          position: fixed;
          right: 2%;
          bottom: 2%;
          height: 60px;
          width: 60px;
          color: #10cab7;
          font-size: 35px;
          animation: mymove 2s infinite;
          z-index: 1;
          background-color: #2d2c2d;
          text-align: center;
          padding-top: 12px ;
          border-radius: 50%;
          /* 新增：平滑过渡效果 */
          transition: all 0.3s ease;
          opacity: 1;
          visibility: visible;
      }
      #button:hover{
          cursor: pointer;
          color: #38f8e5;
          transition: all 0.3s;
      }
      /* 新增：按钮隐藏状态类 */
      #button.hide-btn {
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
      }
  </style>
  
  <script>
    // 获取回到顶部按钮和落地页图片元素，请将#landing-img替换为你实际的落地页图片选择器
    const scrollBtn = document.getElementById('button');
    const landingImg = document.querySelector('#landing-img');

    function checkCollision() {
      if (!landingImg) return;
      // 获取两个元素的位置信息
      const btnRect = scrollBtn.getBoundingClientRect();
      const imgRect = landingImg.getBoundingClientRect();

      // 判断是否重叠
      const isOverlap = !(
        btnRect.bottom < imgRect.top || 
        btnRect.top > imgRect.bottom || 
        btnRect.right < imgRect.left || 
        btnRect.left > imgRect.right
      );

      // 重叠时添加隐藏类，否则移除
      if (isOverlap) {
        scrollBtn.classList.add('hide-btn');
      } else {
        scrollBtn.classList.remove('hide-btn');
      }
    }

    // 监听滚动、窗口大小变化事件触发检测
    window.addEventListener('scroll', checkCollision);
    window.addEventListener('resize', checkCollision);
    // 页面加载完成后先执行一次检测
    window.addEventListener('load', checkCollision);
  </script>
</div>
<!-- End Bottom to scroll you up  -->

关键修改说明 #

• 给#button新增了平滑过渡属性，保证透明度、可见性变化时是缓动效果
• 新增.hide-btn状态类，控制按钮隐藏时的样式：完全透明、不可点击、不占交互空间
• 新增JS逻辑：实时检测按钮与落地页图片的位置是否重叠，重叠时自动添加隐藏类，离开后自动恢复显示

使用注意 #

请将代码中document.querySelector('#landing-img')的选择器替换为你实际落地页图片的类名或ID，可通过修改transition属性的时间参数调整动画速度。

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