hhh_new/template/button.html

<!-- 右下角按鈕區塊 -->

<button data-gt-target="#top" data-gt-duration="100" data-gt-offset="0" class="gotop-btn" title="GoTop">
  <!-- <span class="top_img"></span> -->
  <img src="https://hhh.com.tw/hhh_index/images/icon/feather-chevron-right.svg" alt="">
</button>

<!-- <button title="為我推薦設計師" class="d-none d-md-inline" data-ga="Go_To_Request">
    <a href="https://hhh.com.tw/about/request/" target="_blank">
      <img src="./img/icon/feather-file-text.svg" alt="">
    </a>
  </button>

  <button title="裝修預算評估" class="d-none d-md-inline" data-ga="Go_To_Calculator">
    <a href="https://hhh.com.tw/about/calculator/" target="_blank">
      <img src="./img/icon/ionic-ios-calculator.svg" alt="" style="width: 22px; margin-left: 3px;">
    </a>
  </button>

  <button title="裝修預算諮詢" class="d-none d-md-inline" data-ga="Go_To_Calculator">
    <a href="https://hhh.com.tw/calculator_request/index.html" target="_blank">
      <img src="./img/icon/ionic-ios-calculator.svg" alt="" style="width: 22px; margin-left: 3px;">
    </a>
  </button>

  <button title="+好物商城" class="d-none d-md-inline" data-ga="Go_To_Shop">
    <a href="https://shop.hhh.com.tw/" target="_blank">
      <img src="./img/icon/feather-shopping-cart.svg" alt="">
    </a>
  </button> -->

<button title="裝修預算諮詢" class="d-none d-md-inline calculator-btn" data-ga="Go_To_Calculator">
  <a href="https://hhh.com.tw/calculator_request/index.html" target="_blank">
    <img src="https://hhh.com.tw/hhh_index/images/icon/ionic-ios-calculator.svg" alt=""
      style="width: 22px; margin-left: 3px;">
    <p>裝修計算機</p>
  </a>
</button>

<button title="+好物商城" class="d-none d-md-inline shop-btn" data-ga="Go_To_Shop">
  <a href="https://shop.hhh.com.tw/" target="_blank">
    <img src="https://hhh.com.tw/hhh_index/images/icon/feather-shopping-cart.svg" alt="">
    <p>+好物</p>
  </a>
</button>

<!-- 暫時隱藏 -->
<!-- <button title="線上諮詢">
    <a href="https://hhh.com.tw/about/contact/" target="_blank">
      <img src="./images/icon/simple-hipchat.svg" alt="">
    </a>
  </button> -->


<div class="d-md-none justify-content-evenly mb-menu">
  <!-- <section title="為我推薦設計師" data-ga="Go_To_Request">
    <a href="https://hhh.com.tw/about/request/" target="_blank">
      <img src="./img/icon/feather-file-text.svg" alt="為我推薦設計師">
      <h4>填需求</h4>
    </a>
  </section>
  <section title="裝修預算評估" data-ga="Go_To_Calculator">
    <a href="https://hhh.com.tw/about/calculator/" target="_blank">
      <img src="./img/icon/ionic-ios-calculator.svg" alt="裝修預算評估">
      <h4>估預算</h4>
    </a>
  </section> -->

  <section title="裝修計算機" data-ga="Go_To_Calculator">
    <a href="https://hhh.com.tw/calculator_request/index.html" target="_blank">
      <img src="https://hhh.com.tw/hhh_index/images/icon/calculator_request.svg" alt="裝修計算機">
      <h4>裝修計算機</h4>
    </a>
  </section>

  <section title="+好物商城" data-ga="Go_To_Shop">
    <a href="https://shop.hhh.com.tw/" target="_blank">
      <img src="https://hhh.com.tw/hhh_index/images/icon/feather-shopping-cart.svg" alt="+好物商城">
      <h4>+好物</h4>
    </a>
  </section>

  <section data-ga="Go_To_Member">
    <a href="https://m.hhh.com.tw/users">
      <img src="https://hhh.com.tw/hhh_index/images/icon/material-people.svg" alt="會員"
        style="filter: invert(67%) sepia(0%) saturate(0%) hue-rotate(242deg) brightness(91%) contrast(93%);">
      <h4>會員</h4>
    </a>
  </section>
</div>

<script>
  $(".gotop-btn").click(() => {
    $("html, body").animate(
      {
        scrollTop: 0,
      }, 0
    );
  });

  // 右下按鈕滑入顯示
  $(".calculator-btn").hover(function () {
    $(".calculator-btn").addClass("show");
  }, function () {
    $(".calculator-btn").removeClass("show");
  });

  $(".shop-btn").hover(function () {
    $(".shop-btn").addClass("show");
  }, function () {
    $(".shop-btn").removeClass("show");
  });

  // 判斷按鈕顯示 or 隱藏
  $(window).scroll(function () {
    if ($(this).scrollTop()) {
      $('#btn-box').fadeIn();
    } else {
      $('#btn-box').fadeOut();
    }
  });

  // 滑到 footer 區塊隱藏下方選單
  // let footerHeight = $("#footer").height();
  // let bodyHeight = $("body").height()
  // $(window).scroll(function () {
  //   let height = (bodyHeight - footerHeight) - 600;
  //   if ($(window).scrollTop() > height) {
  //     $('.mb-menu').css("opacity", "0");
  //   } else {
  //     $('.mb-menu').css("opacity", "1");
  //   }
  // });
</script>

<script>
  document.querySelector('button[data-ga="Go_To_Calculator"]').addEventListener('click', function () {
    dataLayer.push({
      'event': 'Go_To_Calculator',
      'btn_location': 'FixedBTN'
    });
  });

  document.querySelector('button[data-ga="Go_To_Shop"]').addEventListener('click', function () {
    dataLayer.push({
      'event': 'Go_To_Shop',
      'btn_location': 'FixedBTN'
    });
  });
</script>