調整服務流程錨點方法

content/規劃師服務/index.md

@@ -5,6 +5,9 @@ draft: false
 url: "/room_planner"
 ---
 
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"
+  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+
 <script>
   window.onload = () => {
     let questionList = document.querySelectorAll('.question');
@@ -22,6 +25,33 @@ url: "/room_planner"
       }, false);
     })
   };
+
+  $("*").each(function (index, element) {
+    // 此元素被點選後執行
+    $("body").click(function (e) {
+      // 取得被點選元素的屬性：data-gt-target
+      var target = $(event.target).attr("data-gt-target");
+      var duration = $(event.target).attr("data-gt-duration");
+      var offset = $(event.target).attr("data-gt-offset");
+
+      if (target) {
+        // 上方位置 = 目標區塊.位移().上方位置
+        var top = $(target).offset().top;
+
+        // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
+        // parseInt() 將文字轉為數字
+        $("html").stop().animate({
+          scrollTop: top - offset
+        }, parseInt(duration));
+      }
+    });
+  });
+
+  // 避免動畫與使用者滾輪衝突
+  // html 在滾動滾輪時 停止 html 所有效果
+  $("html").on("mousewheel", function () {
+    $("html").stop();
+  });
 </script>
 
 <section class="section13">
@@ -42,19 +72,19 @@ url: "/room_planner"
 <section class="section25" style="padding-bottom: 100px;">
   <div class="container">
     <div class="title-box">
-      <a href="#container-1">
+      <a data-gt-target="#container-1" data-gt-duration="100" data-gt-offset="30">
         01諮詢階段
       </a>
-      <a href="#container-2">
+      <a data-gt-target="#container-2" data-gt-duration="100" data-gt-offset="150">
         02設計階段
       </a>
-      <a href="#container-3">
+      <a data-gt-target="#container-3" data-gt-duration="100" data-gt-offset="150">
         03報價階段
       </a>
-      <a href="#container-4">
+      <a data-gt-target="#container-4" data-gt-duration="100" data-gt-offset="80">
         04付款階段
       </a>
-      <a href="#container-5">
+      <a data-gt-target="#container-5" data-gt-duration="100" data-gt-offset="150">
         05施工階段
       </a>
     </div>