jQuery offset()用法-錨點

Posted on In

這一篇要介紹的是 offset() 的用法

教學網址

教學網址

offset()用法

範例：
https://codepen.io/saffranwang/pen/EMgrdr

用來得知元素的座標

offset() 語法是用來取得當前元素的位置偏移值，後面可以接上

  • top：由上面往下算

或是

  • left：由左向右計算

因此 var targetPos = $(target).offset().top; 就是取得該元素位置的 y 軸座標

jq語法：

1
2
3
4
$('.position-1').click(function(event) {
    var x=$('#p1').offset();
    alert('Top:'+ x.top + 'Left:'+ x.left);	
});

點擊按鈕（.position-1），就可以得到p1段落的top和left座標

position() 和 offset() 的差別

position() 和 offset() 的差別看這篇：
https://hackmd.io/s/HkKO-aMaE#position-和-offset-的差別

用來移動元素的座標

jq語法：

top和left的數值，單位是px，但是不可以把px寫上去（程式碼會無效）

1
2
3
$('.position-2').click(function(event) {
    $('#p2').offset({top: 80, left: 700});
});

點擊按鈕（.position-2），就可以把p2段落移動到top: 80, left: 700的位置

我的codepen練習

麻煩版（把每個選單項目 About, Work, Pricing, Sign up 都各自分開寫）

https://codepen.io/saffranwang/pen/EMgrdr?editors=1010

設置錨點的關鍵jq語法：

1
2
3
4
5
6
7
8
9
10
$('.work-click').click(function(event) {
    
    event.preventDefault();
    
    $('html, body').animate({
      scrollTop: $('#work').offset().top-50 
	},
	1000);
	
});

[說明]

  • 點擊選單上的Work按鈕後（.work-click），整個網頁（html, body）就會開始做動畫（.animate）
  • 做的動畫效果是：scrollTop
  • $('#work').offset().top-50 代表的是「scrollTop要滑到的位置」，#work是「Work那個div的ID名稱」，使用.offset()來取得「<div id="work">的座標位置」
    • .top 代表我要的是「頂端的」座標
    • 減掉50是為了扣掉header的高度
  • 1000是代表「scrollTop所需花費的毫秒數」

但是，每個選單項目都要分開來寫太麻煩了，該怎麼解決呢？

[麻煩版]

把#work（div的ID）使用 var 代入，就可以不需要每個選單上的項目都寫一次，下了 var 去記錄我當下的選單 ID 名稱。

[精簡版]codepen網址：

https://codepen.io/saffranwang/pen/LaboMa?editors=1010

#work = x = $(this).attr(‘href’) = 選單上項目的href值

同樣用了 jQuery 的 offset 與 top 語法，它能夠幫我們找出該 div 的位置的最上緣，像是這個蛋黃哥的網站選單也是這樣做出來的。

老師的範例

jquery語法中有幾個問題想釐清

Q:

為什麼要使用 .on()，這裡跟直接使用 .click() 的差別在哪裡？

A:

.on() 和 .click() 的差別可以看這篇文章，在綁定已有的元素之監聽事件上是兩者都可以達成，但對於動態綁定事件就會建議使用 .on()

Q:

1
2
3
4
5
6
var _href = $(this).attr('href');
  console.log(this);
    $('html, body').animate({
        scrollTop: $( _href ).offset().top
    }, 800);
  });

使用 var 和 console.log 這段看不太懂，想請老師解釋。

也想再請問一下，這裡要使用 var 和 console.log 是為什麼呢？因為在我的寫法中並沒有用到，想知道兩種寫法有什麼差異

A:

var 是定義一個變數，讓他指向 this 的 href 屬性值，而 console.log 是顯示取出的 this 是指什麼內容。兩種方式其實是相同的意思，以你的程式碼為例：
$(this).attr('href') 就是取得 .about-click 的 href 也就是 #about，並建立一個變數 _href 指向 #about，而 $( _href ).offset().top 也就等於 $('#about').offset().top

Q:

想再請問一下有關於console.log，還是不太懂這裡為什麼需要在console顯示出this的內容（如下圖），它的作用是什麼呢？

我在網路上查到console.log的用途（參考文章），都是用它來做檢測和debug（會寫在「檢查元素」的console裡面），但是在做錨點的時候，為什麼需要把它寫在html裡面？

A:

console.log() 只是檢查元素，確認 this 出來的結果為何，你可以當作是幫助你了解目前選取到的內容是什麼，他沒有實際上的影響，拿掉後依然都會正常執行，只是 console 不會出現內容了

Q&A

Q:

錨點範例
https://codepen.io/saffranwang/pen/xBEWGK

幾個問題想跟老師請教

Q1：如何在網頁上觀看圖片座標(x,y)位置?
Q2：練習中，這兩行語法想問老師是什麼意思?
為何console.log()，括號中是寫this而不是_href?
最後，這部分內容會在javascript單元有更多說明嗎?
Q3：想請問，現在設定能順利滑到每個指定位置，但因為header有設定position: fixed; 所以每個區塊的高度都會被header吃掉一些，該如何設定才能讓header底部是在區塊最上方不被header高度吃掉呢?

A:

關於你提出的問題:

1.Jquery 本身有提供 offset() 跟 pageX, pageY 這類取得座標的方法可以使用，這邊有寫了一個範例讓你參考 
https://codepen.io/saffranwang/pen/zboypo

2-1.第一行是取得 $(this) 的 href 屬性 (attribute) ，並將值存入變數 _href 中， 第二行是在瀏覽器的開發者人員工具中顯示 this

2-2. 其實 console.log() 裡面寫 this 只是幫助同學瞭解所點擊的元素包含什麼，寫 _href 也可以觀察

2-3. 會， javascript 單元有提到

3.這部分只要扣除 header 的高度即可