瀏覽代碼

新增表單傳送功能

jeter20131220 3 年之前
父節點
當前提交
4a4d10030b
共有 7 個文件被更改,包括 402 次插入235 次删除
  1. 79 34
      desktop11/goto.js
  2. 16 4
      desktop11/index.html
  3. 133 116
      mobile/index.html
  4. 142 50
      mobile/script/goto.js
  5. 16 16
      mobile/style.css
  6. 0 0
      mobile/style.css.map
  7. 16 15
      mobile/style.scss

+ 79 - 34
desktop11/goto.js

@@ -84,53 +84,98 @@ $.fn.serializeObject = function () {
   return o;
 };
 
-function onClik() {
+$(".contact-form1").submit(function (e) {
   /*	var formRef = $('#form1').serializeArray();
     var jsonString = JSON.stringify(formRef);*/
   var jsonInfo = $('.contact-form1').serializeObject();
   var jsonString = JSON.stringify(jsonInfo);
   alert(jsonString);
   console.log(jsonString);
-  // $.ajax({
-  //   type: 'POST',
-  //   url: 'http://172.105.205.52:8001/deco_request_detail',
-  //   data: jsonString,
-  //   dataType: 'json',
-  //   success: function (data, textStatus, jqXHR) {
-
-  //     alert("送出成功");
-  //   },
-  //   complete: function () {
-  //     alert("complete");
-  //   },
-  //   beforeSend: function () {
-  //     alert("beforeSend");
-  //   },
-
-
-  //   error: function (jqXHR, textStatus, errorThrown) {
-  //     alert("送出失敗");
-
-  //   }
-  // });
-  // return false;
+  // email 格式檢查
+  $(document).ready(function () {
 
+    //E-MAIL格式檢查
+
+    $("body").on("change", "#email", function () {
+
+      $Emailchecking = IsEmail($("#email").val());
+
+
+      if ($Emailchecking == false) {
+
+        alert("請填寫正確的E-MAIL格式");
+
+        // $("#email").blur(); //離開焦點
+
+      }
+
+    })
+
+    function IsEmail(email) {
+
+      var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+
+      if (!regex.test(email)) {
+
+        return false;
+
+      } else {
+
+        return true;
+
+      }
+
+    }
+
+  });
+  //手機格是檢查
+  //jquery驗證手機號碼
+//jquery驗證手機號碼
+// function checkSubmitMobil() {
+//   if ($("#phone").val() == "") {
+//   alert("手機號碼不能為空!");
+//   //$("#moileMsg").html("<font color='red'>手機號碼不能為空!");
+//   $("#phone").focus();
+//   return false;
+//   }
+  
+//   if (!$("#phone").val().match(/^(((13[0-9]{1})|159|153)+/d{8})$/)) {
+//   alert("手機號碼格式不正確!");
+//   $("#phone").focus();
+//   return false;
+//   }
+//   }
   $.ajax({
-    url:'http://172.105.205.52:8001/deco_request_detail',
-    type: 'POST',  // http method
-    data:jsonString, // data to submit
+    type: 'POST',
+    url: 'http://172.105.205.52:8001/deco_request_detail',
+    data: jsonString,
     dataType: 'json',
-    success: function (res) {
-        console.log(res);
+    success: function (data) {
+      console.log('送出成功: ' + data);
+      if (data == 0) {
         alert("送出成功");
+      } else if (data == 1) {
+        alert("email重複");
+      } else if (data == 2) {
+        alert("phone重複");
+      } else if (data == 3) {
+        alert("email、phone重複");
+      }
     },
-    error: function (err) {
-        console.log(err);
-        alert("送出失敗");
-
+    beforeSend: function () {
+      console.log('beforeSend');
+    },
+    complete: function () {
+      console.log('complete');
+    },
+    error: function (jqXHR, textStatus, errorThrown) {
+      console.log(JSON.stringify(jqXHR));
+      console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
+      console.log('送出失敗: ' + jqXHR.responseText);
     }
   });
-}
+  return false;
+});
 
 
 

+ 16 - 4
desktop11/index.html

@@ -5,8 +5,20 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
-    <title>HHH_Home_Decoration2</title>
+    <meta name="copyright" content="2021 © 幸福空間 │ All Rights Reserved.">
+    <meta name="creation-date" content="2021-05-24 12:00:04 GTM+8">
+    <meta name="description" content="免費預約裝修諮詢">
+    <meta name="distribution" content="Taiwan">
+    <meta name="keywords" content="">
+    <meta name="revisit-after" content="1 days">
+    <meta name="robots" content="all">
+    <meta name="format-detection" content="telephone=no">
+    <meta property="og:description" content="免費預約裝修諮詢" />
+    <meta property="og:site_name" content="全室裝修" />
+    <meta property="og:title" content="幸福空間 - 全室裝修" />
+    <meta property="og:type" content="website" />
+    <meta property="og:locale" content="zh_TW">
+    <title>全室裝修</title>
 
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
@@ -318,7 +330,7 @@
                                 <option class="option" value="2" >2</option>
                                 <option class="option" value="3" >3</option>
                                 <option class="option" value="4" >4</option>
-                                <option class="option" value="5" >5</option> value="1" 
+                                <option class="option" value="5" >5</option> 
                                 <option class="option" value="6" >6</option>
                                 <option class="option" value="7" >7</option>
                                 <option class="option" value="8" >8</option>
@@ -362,7 +374,7 @@
 
                     </div>
                     <div class="form-btn">
-                        <input class="btn" style="opacity: 1;" type="submit" onclick="onClik();" value="送出">
+                        <input class="btn" style="opacity: 1;" type="submit" value="送出">
 
                     </div>
                 </form>

+ 133 - 116
mobile/index.html

@@ -5,7 +5,20 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HHH_Home_Decoration</title>
+    <meta name="copyright" content="2021 © 幸福空間 │ All Rights Reserved.">
+    <meta name="creation-date" content="2021-05-24 12:00:04 GTM+8">
+    <meta name="description" content="預約居家布置諮詢">
+    <meta name="distribution" content="Taiwan">
+    <meta name="keywords" content="">
+    <meta name="revisit-after" content="1 days">
+    <meta name="robots" content="all">
+    <meta name="format-detection" content="telephone=no">
+    <meta property="og:description" content="預約居家布置諮詢" />
+    <meta property="og:site_name" content="全室裝修" />
+    <meta property="og:title" content="幸福空間 - 全室裝修" />
+    <meta property="og:type" content="website" />
+    <meta property="og:locale" content="zh_TW">
+    <title>全室裝修</title>
 
 
     <!-- Slick CDN -->
@@ -71,7 +84,8 @@
         </section>
     </div>
     <div class="btn">
-        <button class="btn-main" data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300" >預約居家布置諮詢</button>
+        <button class="btn-main" data-gt-target="#contact-us" data-gt-duration="800"
+            data-gt-offset="-300">預約居家布置諮詢</button>
     </div>
     <div class="container-fluid" style="padding:0;margin:0  ">
         <section id="content1">
@@ -189,7 +203,8 @@
             </div>
         </div> -->
         <div class="btn">
-            <button class="btn-main" data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300">預約居家布置諮詢</button>
+            <button class="btn-main" data-gt-target="#contact-us" data-gt-duration="800"
+                data-gt-offset="-300">預約居家布置諮詢</button>
         </div>
     </section>
     <section id="service-process">
@@ -298,122 +313,124 @@
                     style="color:  #ee751b;">0800-336-086</span></p>
             <p>或填寫以下資料,專人將盡速與您聯繫。</p>
         </div>
-        <div id="contact-form">
-            <select name="location" id="location">
-                <option value="地區" disabled selected="selected">地區</option>
-                <option class="option" value="type">基隆市</option>
-                <option class="option" value="type">台北市</option>
-                <option class="option" value="type">新北市</option>
-                <option class="option" value="type">桃園市</option>
-                <option class="option" value="type">新竹縣</option>
-                <option class="option" value="type">新竹市</option>
-                <option class="option" value="type">苗栗縣</option>
-                <option class="option" value="type">台中市</option>
-                <option class="option" value="type">彰化縣</option>
-                <option class="option" value="type">雲林縣</option>
-                <option class="option" value="type">嘉義縣</option>
-                <option class="option" value="type">嘉義市</option>
-                <option class="option" value="type">台南市</option>
-                <option class="option" value="type">高雄市</option>
-                <option class="option" value="type">屏東縣</option>
-                <option class="option" value="type">宜蘭縣</option>
-                <option class="option" value="type">花蓮縣</option>
-                <option class="option" value="type">台東縣</option>
-                <option class="option" value="type">澎湖縣</option>
+        <form class="contact-form1">
+            <div id="contact-form">
+                <select name="loc" id="location" required>
+                    <option value="地區" disabled selected="selected">地區</option>
+                    <option class="option" value="type">基隆市</option>
+                    <option class="option" value="type">台北市</option>
+                    <option class="option" value="type">新北市</option>
+                    <option class="option" value="type">桃園市</option>
+                    <option class="option" value="type">新竹縣</option>
+                    <option class="option" value="type">新竹市</option>
+                    <option class="option" value="type">苗栗縣</option>
+                    <option class="option" value="type">台中市</option>
+                    <option class="option" value="type">彰化縣</option>
+                    <option class="option" value="type">雲林縣</option>
+                    <option class="option" value="type">嘉義縣</option>
+                    <option class="option" value="type">嘉義市</option>
+                    <option class="option" value="type">台南市</option>
+                    <option class="option" value="type">高雄市</option>
+                    <option class="option" value="type">屏東縣</option>
+                    <option class="option" value="type">宜蘭縣</option>
+                    <option class="option" value="type">花蓮縣</option>
+                    <option class="option" value="type">台東縣</option>
+                    <option class="option" value="type">澎湖縣</option>
 
 
-            </select>
-            <select name="type" id="type">
-                <option value="房屋類型" disabled selected="selected">房屋類型</option>
-                <option class="option" value="type">預售屋</option>
-                <option class="option" value="type">中古屋</option>
-                <option class="option" value="type">新成屋</option>
-                <option class="option" value="type">毛胚屋</option>
-                <option class="option" value="type">自地自建</option>
-            </select>
-            <select name="modal" id="modal">
-                <option value="modal" disabled selected="selected">房屋型態</option>
-                <option class="option" value="type">透天</option>
-                <option class="option" value="type">電梯華廈</option>
-                <option class="option" value="type">公寓</option>
-                <option class="option" value="type">平房</option>
-                <option class="option" value="type">民宿</option>
-                <option class="option" value="type">商空</option>
-                <option class="option" value="type">其他</option>
-            </select>
-            <select name="budget" id="budget">
-                <option value="裝修預算" disabled selected="selected">裝修預算</option>
-                <option class="option" value="type">50~100萬</option>
-                <option class="option" value="type">100~200萬</option>
-                <option class="option" value="type">200~300萬</option>
-                <option class="option" value="type">300萬~400萬</option>
-                <option class="option" value="type">400~500萬</option>
-                <option class="option" value="type">500萬以上</option>
-            </select>
-            <input type="text" id="square" placeholder="請輸入坪數" required>
-            <select name="rooms" id="rooms">
-                <option value="幾房" disabled selected="selected">幾房</option>
-                <option class="option" value="type">1房</option>
-                <option class="option" value="type">2房</option>
-                <option class="option" value="type">3房</option>
-                <option class="option" value="type">4房</option>
-                <option class="option" value="type">5房</option>
-                <option class="option" value="type">6房</option>
-                <option class="option" value="type">7房</option>
-                <option class="option" value="type">8房</option>
-            </select>
-            <select name="living room" id="livingroom">
-                <option value="living room" disabled selected="selected">幾廳</option>
-                <option class="option" value="type">1廳</option>
-                <option class="option" value="type">2廳</option>
-            </select>
-            <select name="bathroom" id="bathroom">
-                <option value="bathroom" disabled selected="selected">幾衛</option>
-                <option class="option" value="type">1衛</option>
-                <option class="option" value="type">2衛</option>
-                <option class="option" value="type">3衛</option>
-                <option class="option" value="type">4衛</option>
-                <option class="option" value="type">5衛</option>
-                <option class="option" value="type">6衛</option>
-                <option class="option" value="type">7衛</option>
-                <option class="option" value="type">8衛</option>
-            </select>
-            <select name="cars" id="style">
-                <option value="風格類型" disabled selected="selected">風格類型</option>
-                <option class="option" value="type">現代風</option>
-                <option class="option" value="type">鄉村風</option>
-                <option class="option" value="type">古典風</option>
-                <option class="option" value="type">休閒多元</option>
-                <option class="option" value="type">美式風</option>
-                <option class="option" value="type">奢華風</option>
-                <option class="option" value="type">新古典</option>
-                <option class="option" value="type">日式禪風</option>
-                <option class="option" value="type">東方風</option>
-                <option class="option" value="type">混搭風</option>
-                <option class="option" value="type">前衛風</option>
-                <option class="option" value="type">北歐風</option>
-                <option class="option" value="type">工業風</option>
-                <option class="option" value="type">異國風</option>
-            </select>
-            <input type="date" id="date" placeholder="預選裝修日期" required>
-            <div id="facebook">
-                <img src="./img/process/facebook.webp" alt="">
-                <p>使用FB填入信箱與姓名 </p>
+                </select>
+                <select name="h_class" id="type" required>
+                    <option value="房屋類型" disabled selected="selected">房屋類型</option>
+                    <option class="option" value="type">預售屋</option>
+                    <option class="option" value="type">中古屋</option>
+                    <option class="option" value="type">新成屋</option>
+                    <option class="option" value="type">毛胚屋</option>
+                    <option class="option" value="type">自地自建</option>
+                </select>
+                <select name="type" id="modal" required>
+                    <option value="modal" disabled selected="selected">房屋型態</option>
+                    <option class="option" value="type">透天</option>
+                    <option class="option" value="type">電梯華廈</option>
+                    <option class="option" value="type">公寓</option>
+                    <option class="option" value="type">平房</option>
+                    <option class="option" value="type">民宿</option>
+                    <option class="option" value="type">商空</option>
+                    <option class="option" value="type">其他</option>
+                </select>
+                <select name="budget" id="budget" required>
+                    <option value="裝修預算" disabled selected="selected">裝修預算</option>
+                    <option class="option" value="type">50~100萬</option>
+                    <option class="option" value="type">100~200萬</option>
+                    <option class="option" value="type">200~300萬</option>
+                    <option class="option" value="type">300萬~400萬</option>
+                    <option class="option" value="type">400~500萬</option>
+                    <option class="option" value="type">500萬以上</option>
+                </select>
+                <input name="size" type="text" id="square" placeholder="請輸入坪數" required>
+                <select name="bed_num" id="rooms" required>
+                    <option value="幾房" disabled selected="selected">幾房</option>
+                    <option class="option" value="1">1</option>
+                    <option class="option" value="2">2</option>
+                    <option class="option" value="3">3</option>
+                    <option class="option" value="4">4</option>
+                    <option class="option" value="5">5</option>
+                    <option class="option" value="6">6</option>
+                    <option class="option" value="7">7</option>
+                    <option class="option" value="8">8</option>
+                </select>
+                <select name="liv_num" id="livingroom" required style="margin-right:1.5vw">
+                    <option value="living room" disabled selected="selected">幾廳</option>
+                    <option class="option" value="1">1</option>
+                    <option class="option" value="2">2</option>
+                </select>
+                <select name="bath_num" id="bathroom" required>
+                    <option value="bathroom" disabled selected="selected">幾衛</option>
+                    <option class="option" value="1">1</option>
+                    <option class="option" value="2">2</option>
+                    <option class="option" value="3">3</option>
+                    <option class="option" value="4">4</option>
+                    <option class="option" value="5">5</option>
+                    <option class="option" value="6">6</option>
+                    <option class="option" value="7">7</option>
+                    <option class="option" value="8">8</option>
+                </select>
+                <select name="style" id="style" required>
+                    <option value="風格類型" disabled selected="selected">風格類型</option>
+                    <option class="option" value="type">現代風</option>
+                    <option class="option" value="type">鄉村風</option>
+                    <option class="option" value="type">古典風</option>
+                    <option class="option" value="type">休閒多元</option>
+                    <option class="option" value="type">美式風</option>
+                    <option class="option" value="type">奢華風</option>
+                    <option class="option" value="type">新古典</option>
+                    <option class="option" value="type">日式禪風</option>
+                    <option class="option" value="type">東方風</option>
+                    <option class="option" value="type">混搭風</option>
+                    <option class="option" value="type">前衛風</option>
+                    <option class="option" value="type">北歐風</option>
+                    <option class="option" value="type">工業風</option>
+                    <option class="option" value="type">異國風</option>
+                </select>
+                <input name="prefer_date" type="date" id="date" placeholder="預選裝修日期" required>
+                <div id="facebook">
+                    <img src="./img/process/facebook.webp" alt="">
+                    <p>使用FB填入信箱與姓名 </p>
+                </div>
+                <input type="text" name="email" id="email" placeholder="請輸入信箱" required>
+                <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
+                <input type="text" name="phone" id="phone" placeholder="請輸入電話" required>
+                <select name="gender" id="gender">
+                    <option value="性格" disabled selected="selected">性別</option>
+                    <option class="option" value="type">男</option>
+                    <option class="option" value="type">女</option>
+                </select>
+                <input type="checkbox" id="checkbox"> <label id="agree" for="agree">同意</label><a
+                    href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
+                <div class="form-btn">
+                    <input class="btn" style="opacity: 1;" type="submit" value="送出">
+                </div>
             </div>
-            <input type="text" id="email" placeholder="請輸入信箱" required>
-            <input type="text" id="name" placeholder="請輸入姓名" required>
-            <input type="text" id="phone" placeholder="請輸入電話" required>
-            <select name="cars" id="gender">
-                <option value="性格" disabled selected="selected">性別</option>
-                <option class="option" value="type">男</option>
-                <option class="option" value="type">女</option>
-            </select>
-            <input type="checkbox" id="checkbox"> <label id="agree" for="agree">同意</label><a
-                href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
-        </div>
-        <div id="form">
-            <button id="btn">送出</button>
-        </div>
+        </form>
     </section>
     <div id="footer">
         <p>幸福空間 版權所有 &copy; Gorgeous Space Co.Ltd.</p>

+ 142 - 50
mobile/script/goto.js

@@ -5,66 +5,158 @@ $("#menu-box").hide();
 
 $("#menu-btn1").click(function () {
   $("#menu-box").fadeToggle("slow");
-    $("#menu-box2").slideToggle( "slow" );
+  $("#menu-box2").slideToggle("slow");
 
 });
 
 $(".feedback-slider1").slick({
-    dots:true,
-    dotsClass:'slick-dots',
-    speed:1000, 
-    swipe:true,
-  });
+  dots: true,
+  dotsClass: 'slick-dots',
+  speed: 1000,
+  swipe: true,
+});
 
-  $(".banner-slider").slick({
-    dots:true,
-    dotsClass:'slick-dots',
-    speed:1000, 
-   swipe:true,
+$(".banner-slider").slick({
+  dots: true,
+  dotsClass: 'slick-dots',
+  speed: 1000,
+  swipe: true,
+});
+
+$(".link").click(function () {
+  $("#menu-box2").fadeOut("slow", function () {
+    // Animation complete.
   });
+});
 
-  $( ".link" ).click(function() {
-    $( "#menu-box2" ).fadeOut( "slow", function() {
-      // Animation complete.
-    });
+$.fn.serializeObject = function () {
+  var o = {};
+  var a = this.serializeArray();
+  o["id"] = 0;
+  o["time_stamp"] = "";
+  $.each(a, function () {
+    if (o[this.name]) {
+      if (!o[this.name].push) {
+        o[this.name] = [o[this.name]];
+      }
+      o[this.name].push(this.value || '');
+    } else {
+      o[this.name] = this.value || '';
+    }
   });
 
-  $("*").each(function (index, element) {
-    // 此元素被點選後執行
-    $(this).click(function (e) {
-      // 取得被點選元素的屬性:data-gt-target
-      var target = $(this).attr("data-gt-target");
-      var duration = $(this).attr("data-gt-duration");
-      var offset = $(this).attr("data-gt-offset");
-  
-      // JS 語法:判斷式
-      // if (條件) {程式區塊}
-      // 當條件成立,會執行程式區塊
-  
-      // 如果 目標有資料 才會執行 { } 內的程式
-      // 避免出現 undefine (未定義 - 不存在的資料)
-      if (target) {
-        //console.log("目標:" + target);
-        //console.log("時間:" + duration);
-        //console.log("位移:" + offset);
-  
-        // 上方位置 = 目標區塊.位移().上方位置
-        var top = $(target).offset().top;
-        //console.log("要前往元素的上方位置:" + top);
-  
-        // 網頁元素.停止().動畫({ 上方捲動:指定元素 - 位移},持續時間)
-        // parseInt() 將文字轉為數字
-  
-        $("html").stop().animate({
-          scrollTop: top - offset
-        }, parseInt(duration));
+  return o;
+};
+$(".contact-form1").submit(function (e) {
+  /*	var formRef = $('#form1').serializeArray();
+    var jsonString = JSON.stringify(formRef);*/
+  var jsonInfo = $('.contact-form1').serializeObject();
+  var jsonString = JSON.stringify(jsonInfo);
+  $.ajax({
+    type: 'POST',
+    url: 'http://172.105.205.52:8001/deco_request_detail',
+    data: jsonString,
+    dataType: 'json',
+    success: function (data) {
+      console.log('送出成功: ' + data);
+      if (data == 0) {
+        alert("送出成功");
+      } else if (data == 1) {
+        alert("此email已填過表單");
+      } else if (data == 2) {
+        alert("此phone已填過表單");
+      } else if (data == 3) {
+        alert("此email、phone已填過表單");
       }
-    });
+    },
+    beforeSend: function () {
+      console.log('beforeSend');
+    },
+    complete: function () {
+      console.log('complete');
+    },
+    error: function (jqXHR, textStatus, errorThrown) {
+      console.log(JSON.stringify(jqXHR));
+      console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
+      console.log('送出失敗: ' + jqXHR.responseText);
+    }
   });
-  
-  // 避免動畫與使用者滾輪衝突
-  // html 在滾動滾輪時 停止 html 所有效果
-  $("html").on("mousewheel", function () {
-    $("html").stop();
+  return false;
+});
+
+$(document).ready(function(){
+
+//E-MAIL格式檢查
+
+$("body").on("change", "#email", function (){
+
+$Emailchecking=IsEmail($("#email").val());
+
+
+if($Emailchecking==false){
+
+alert("請填寫正確的E-MAIL格式");
+
+$("#email").blur(); //離開焦點
+
+}
+
+})
+
+function IsEmail(email) {
+
+var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+
+if(!regex.test(email)) {
+
+return false;
+
+}else{
+
+return true;
+
+}
+
+}
+
+});
+
+$("*").each(function (index, element) {
+  // 此元素被點選後執行
+  $(this).click(function (e) {
+    // 取得被點選元素的屬性:data-gt-target
+    var target = $(this).attr("data-gt-target");
+    var duration = $(this).attr("data-gt-duration");
+    var offset = $(this).attr("data-gt-offset");
+
+    // JS 語法:判斷式
+    // if (條件) {程式區塊}
+    // 當條件成立,會執行程式區塊
+
+    // 如果 目標有資料 才會執行 { } 內的程式
+    // 避免出現 undefine (未定義 - 不存在的資料)
+    if (target) {
+      //console.log("目標:" + target);
+      //console.log("時間:" + duration);
+      //console.log("位移:" + offset);
+
+      // 上方位置 = 目標區塊.位移().上方位置
+      var top = $(target).offset().top;
+      //console.log("要前往元素的上方位置:" + top);
+
+      // 網頁元素.停止().動畫({ 上方捲動:指定元素 - 位移},持續時間)
+      // parseInt() 將文字轉為數字
+
+      $("html").stop().animate({
+        scrollTop: top - offset
+      }, parseInt(duration));
+    }
   });
+});
+
+// 避免動畫與使用者滾輪衝突
+// html 在滾動滾輪時 停止 html 所有效果
+$("html").on("mousewheel", function () {
+  $("html").stop();
+});
 

+ 16 - 16
mobile/style.css

@@ -618,6 +618,22 @@ body .btn-main:hover {
   text-align: center;
 }
 
+#contact-us #contact-form .btn {
+  margin: 50px auto;
+  border: none;
+  padding: 15px;
+  background: #ffaf60;
+  color: #404854;
+  font-size: 20px;
+  width: 300px;
+  border-radius: 30px;
+}
+
+#contact-us #contact-form .btn:hover {
+  color: #fff;
+  background-color: #745c54;
+}
+
 #contact-us #contact-form #location,
 #contact-us #contact-form #type,
 #contact-us #contact-form #modal,
@@ -738,22 +754,6 @@ body .btn-main:hover {
   position: relative;
 }
 
-#contact-us #form #btn {
-  margin: 50px auto;
-  border: none;
-  padding: 15px;
-  background: #ffaf60;
-  color: #404854;
-  font-size: 20px;
-  width: 300px;
-  border-radius: 30px;
-}
-
-#contact-us #form #btn:hover {
-  color: #fff;
-  background-color: #745c54;
-}
-
 #contact-us #form #phone {
   position: absolute;
   left: 500px;

File diff suppressed because it is too large
+ 0 - 0
mobile/style.css.map


+ 16 - 15
mobile/style.scss

@@ -527,6 +527,21 @@ body {
     }
     #contact-form {
         text-align: center;
+        .btn {
+            margin: 50px auto;
+            border: none;
+            padding: 15px;
+            background: #ffaf60;
+            color: rgb(64, 72, 84);
+            font-size: 20px;
+            width: 300px;
+            border-radius: 30px;
+
+            &:hover {
+                color: #fff;
+                background-color: #745c54;
+            }
+        }
         #location,
         #type,
         #modal,
@@ -630,21 +645,7 @@ body {
     #form {
         text-align: center;
         position: relative;
-        #btn {
-            margin: 50px auto;
-            border: none;
-            padding: 15px;
-            background: #ffaf60;
-            color: rgb(64, 72, 84);
-            font-size: 20px;
-            width: 300px;
-            border-radius: 30px;
-
-            &:hover {
-                color: #fff;
-                background-color: #745c54;
-            }
-        }
+      
 
         #phone {
             position: absolute;

Some files were not shown because too many files changed in this diff