goto.js 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. $(".banner-slider").slick({
  2. speed: 1000,
  3. swipe: true,
  4. arrows: false,
  5. });
  6. $("*").each(function (index, element) {
  7. // 此元素被點選後執行
  8. $(this).click(function (e) {
  9. // 取得被點選元素的屬性:data-gt-target
  10. var target = $(this).attr("data-gt-target");
  11. var duration = $(this).attr("data-gt-duration");
  12. var offset = $(this).attr("data-gt-offset");
  13. // JS 語法:判斷式
  14. // if (條件) {程式區塊}
  15. // 當條件成立,會執行程式區塊
  16. // 如果 目標有資料 才會執行 { } 內的程式
  17. // 避免出現 undefine (未定義 - 不存在的資料)
  18. if (target) {
  19. //console.log("目標:" + target);
  20. //console.log("時間:" + duration);
  21. //console.log("位移:" + offset);
  22. // 上方位置 = 目標區塊.位移().上方位置
  23. var top = $(target).offset().top;
  24. //console.log("要前往元素的上方位置:" + top);
  25. // 網頁元素.停止().動畫({ 上方捲動:指定元素 - 位移},持續時間)
  26. // parseInt() 將文字轉為數字
  27. $("html").stop().animate({
  28. scrollTop: top - offset
  29. }, parseInt(duration));
  30. }
  31. });
  32. });
  33. // 避免動畫與使用者滾輪衝突
  34. // html 在滾動滾輪時 停止 html 所有效果
  35. $("html").on("mousewheel", function () {
  36. $("html").stop();
  37. });