iT邦幫忙

0

能請教一下這段jq的意思是啥嗎??(對jQ真的不熟)

  • 分享至 

  • xImage
$(function () {
                $('a[href*=#]:not([href=#])').click(function() {
               var target = $(this.hash);
               $('html,body').animate({
                scrollTop: target.offset().top
        }, 1000);
        return false;
    });
});
看更多先前的討論...收起先前的討論...
https://www.astralweb.com.tw/jquery-sliding-anchor/ 善用谷哥大師啊,就是讓點錨點有滑動效果啊,還有如果你JQUERY 版本太新,那個# 前面要加脫字符
謝謝你
能問一下那個1000是甚麼意思嗎??
應該是動畫速度為1秒!
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
6
犬千賀
iT邦新手 3 級 ‧ 2018-10-31 11:52:42
最佳解答

jquery是非常白話的語法ㄟ...

$(function(){
// jquery在DOM載入後執行 function(){...}
    $('a[href*=#]:not([href=#])').click(function() {
    // 選擇元素是<a>, 且href包含(*=)'#',但不是(not)'#'
    // 當元素 $('a(...ry)')被按下(click)後執行 function(){...}
        var target = $(this.hash);
        // 設target為網址錨點(this.hash)元素
        $('html,body').animate({
        // 網頁(html,body)執行動畫(animate)
            scrollTop: target.offset().top
            // 向上捲動(scrollTop): 距離( target於網頁相對位置(offset)的y座標(top) )
        }, 1000);
        // 執行時間1000ms
        return false; // 停止動作
    }); // END $('a(...ry)').click
}); // END $(function(){

感覺你的問題是沒耐心... 下次遇到類似狀況:

  1. 先把code整理乾淨 (你都懶得看不要叫別人看
  2. 在腦海裡照code一行行run過一遍 (你都跑不順不要叫電腦跑
  3. 不懂的Function/keyword丟google (你不會的也有人不會
  4. ...發問 (除非3.下錯keyword,否則不會到這步

基本上能接觸到的語法很白話了,認真讀一定能懂
往後還會有很多機會需要解讀程式,要懶請< br >

/images/emoticon/emoticon12.gif

5
Chris
iT邦新手 3 級 ‧ 2018-10-31 10:09:48

排除掉你對 jQuery 的不熟。
從你的程式碼還發現你對幾件事不熟,而這幾件事正好是開發者使用右腦的功能

  1. 對 markdown 不熟。可以用程式碼區塊將程式碼放進去。markdown 會將程式碼渲染成等寬字型,指定為 javascript 可以套用 highlightjs 增加閱讀的舒適度。
  2. 對寫程式的排版不熟。縮排對 block 的認知程度,提高對 scope 的閱讀速度。
$(function () {
    $('a[href*=#]:not([href=#])').click(function() {
        var target = $(this.hash);
        $('html,body').animate({
            scrollTop: target.offset().top
        }, 1000);
        return false;
    });
});

幫你整理一下程式碼。如果可以,請這樣問問題,比較有人會願意回答。
以上

看更多先前的回應...收起先前的回應...

抱歉阿我這幾個月才開始學的...真的不是很懂我是直接從DW上複製下來的我以為貼上來也有縮排,我剩一個月要比技藝競賽真的還很多不懂的

可以先KK Chris大大 這次的鐵人賽主題可不可以不要寫糙扣系列,對你之後的程式入門有幫助!/images/emoticon/emoticon29.gif

能問一下那個1000是甚麼意思嗎??

貼W3School的教學給你參考:jQuery animate() Method
應該是動畫速度為1秒!

darwin0616 謝謝你阿~~

6

細步分解說明給你看好了

$(function () {  //這是jquery後運行的寫法,其實也是javascript的onload的一種應用
     /*
     'a[href*=#]:not([href=#])'這是一種jquery的元件指定寫法
     詳細可參考 http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 
     這邊的選擇器的白話說法。就是找a元素中,href有包含#字的,但href不等於#     
     */
     $('a[href*=#]:not([href=#])').click(function() {        
        var target = $(this.hash); //hash的取值倒不是jquery才有的。但可以拿它來做直接定義元件的處理。也就是說,這裏就是在取得目標元件放到target上。
        $('html,body').animate({ //animate是jquery一種動態的處理方法
           scrollTop: target.offset().top  //這裏就是去操作捲軸,到目標定義的top值
        }, 1000);//動態時間,這邊設定的值是依(毫秒)為單元。也就是說1000毫秒 = 1秒。
        /*
        這是搭配animate作用的值。意思是我要做這個動作。需要多久時間才到達定位。
        一般如果你不做animate動作的話。其實直接操作scroll的top。會變成瞬移。
        裏設定個1秒。讓整個動作跑起來有滑動的感覺
        */
     return false;//這邊為何要回傳個false。其目的是為了要制止a連結的觸發動作。你可以試著拿掉看看。動作會變得很奇怪。因為會有一個a連結的動作跟一個動態動作同時存在。基本上看到的就是瞬移了
  });
});

以上的大部分解說明,希望你能夠明白。

/images/emoticon/emoticon12.gif

我要發表回答

立即登入回答