goto.js 1.5 KB

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