<!DOCTYPE html>
<html lang="ko">
<head>
  
  <meta charset="UTF-8">
  <title>하단 중앙 따라오는 버튼</title>
  <style>
    .floating-button {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background-color: #ff6400; /* 주황 배경 */
      color: white;
      padding: 15px 25px;
      border: none;
      border-radius: 50px;
      font-size: 16px;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      z-index: 9999;
      transition: top 0.3s ease; /* 부드럽게 따라오기 */
    }

    .floating-button:hover {
      background-color: #d95300;
    }
  </style>
  
</head>

<body>
  

  <a href="https://www.sdijbooks.com/authHome/view.asp?authAliasCd=1012"
     class="floating-button"
     target="_blank"
     rel="noopener noreferrer"
     id="floatingBtn">
    🔗 UND 콘텐츠 구매
  </a>

  
  <div style="height: 2000px;"></div>

  
  <script>
    button = document.getElementById('floatingBtn');

    function updateButtonPosition() {
      scrollTop = window.scrollY || document.documentElement.scrollTop;
      windowHeight = window.innerHeight;
      targetTop = scrollTop + windowHeight - 80; // 하단에서 80px 띄움
      button.style.top = `${targetTop}px`;
    }

    window.addEventListener('scroll', updateButtonPosition);
    window.addEventListener('resize', updateButtonPosition);
    window.addEventListener('load', updateButtonPosition);
  </script>

</body>
</html>

Notice

UND 배경화면

모평해체분석서 무료 배포