jeter20131220 3 лет назад
Родитель
Сommit
5a30f5e527
4 измененных файлов с 45 добавлено и 7 удалено
  1. 1 1
      about/about.css
  2. 1 1
      about/about.scss
  3. 39 1
      about/goto2.js
  4. 4 4
      about/index.html

+ 1 - 1
about/about.css

@@ -24,7 +24,7 @@ body .arrow {
   top: 500px;
   width: 45px;
   height: 40px;
-  z-index: 20;
+  z-index: 10;
 }
 
 body .arrow a {

+ 1 - 1
about/about.scss

@@ -27,7 +27,7 @@ body {
         top:500px;
         width: 45px;
         height: 40px;
-        z-index: 20;
+        z-index: 10;
         a{
             margin: 30px 0px;
         }

+ 39 - 1
about/goto2.js

@@ -246,7 +246,7 @@ $(document).ready(function () {
 $(".arrow").hide();
 $(window).scroll(function () {
     var y1 = window.scrollY;
-    if (y1> 100) {
+    if (y1> 500) {
         $(".arrow").show();
     } else {
         $(".arrow").hide();
@@ -278,3 +278,41 @@ if (jQuery(window).width() < 767) {
     
     });
 }
+$("*").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();
+  });

+ 4 - 4
about/index.html

@@ -17,7 +17,7 @@
     <link rel="stylesheet" href="./about.css">
 </head>
 
-<body id="top">
+<body id="top2">
     <section id="Navigation" class="container-fluid" style="padding:0;margin: 0;">
         <div id="nav" class="row">
             <div id="logo" class=" col-md-2 col-lg-3">
@@ -40,9 +40,9 @@
         </div>
     </section>
     <div class="arrow">
-        <img class="img-fluid"  data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/gotop.png" alt="">
-        <a target="_blank" class="icon" href="https://hhh.com.tw/about/request/"><img  class="img-fluid my-3" src="./img/nav-bottom/find.png" alt=""></a>
-        <a target="_blank" class="icon" href="https://hhh.com.tw/about/calculator/"> <img  class="img-fluid" src="./img/nav-bottom/budget.png" alt=""></a>
+        <img class="img-fluid"  data-gt-target="#top2" data-gt-duration="800" data-gt-offset="0" src="../img/gotop.png" alt="">
+        <a target="_blank" class="icon" href="https://hhh.com.tw/about/request/"><img  class="img-fluid my-3" src="../img/nav-bottom/find.png" alt=""></a>
+        <a target="_blank" class="icon" href="https://hhh.com.tw/about/calculator/"> <img  class="img-fluid" src="../img/nav-bottom/budget.png" alt=""></a>
     </div>
     <section id="Navigation2" class="container-fluid" style="padding:0;margin: 0; ">
         <div id="nav" class="nav2">