jQuery勉強中で､一部参考記事のｿｰｽｺｰﾄﾞが分からなかったので御指南いただけると嬉しいです｡ overflow:auto;内のｽｸﾛｰﾙｲﾍﾞﾝﾄを実装しているのですが､5行目に…

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

jQuery勉強中で､一部参考記事のｿｰｽｺｰﾄﾞが分からなかったので御指南いただけると嬉しいです｡

overflow:auto;内のｽｸﾛｰﾙｲﾍﾞﾝﾄを実装しているのですが､5行目にある記述｢var pos = th.top + sh;｣が分かりません｡色々と調べてみたのですが理解につながるような参考記事が見当たらず､こちらに質問させていただきました｡｡

どうぞよろしくお願いいたします！

▼参考記事
http://hack.aipo.com/archives/3385/

▼ｿｰｽｺｰﾄﾞ
$(".jump").click(function(){
var target = "#" + $(this).html();
var th = $(target).position();
var sh = $(".scroll").scrollTop();
var pos = th.top + sh;
$(".scroll").animate({
scrollTop: pos
},"slow", "swing");
});

●質問者: 匿名質問者
●ｶﾃｺﾞﾘ:ｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

▽1 ● 匿名回答1号

ﾍﾞｽﾄｱﾝｻｰ

th.top と sh の値を出してみれば､すぐに分かると思う｡
きっと､思っているような数字じゃないはずだ｡特に th.top の方が｡

参考にしてるﾍﾟｰｼﾞを書いてる人も､よく分からずに書いているんでしょう｡
きっと､ｿｰｽもどこかのﾊﾟｸﾘ｡
変数名の th や sh は､元のｿｰｽでは target height や scroll height のはず｡
この命名法で素直につけるなら､tt や st になるはず(自分で書いていたら)｡

匿名質問者さんのｺﾒﾝﾄ
ご回答ありがとうございます！早速console.logで値を出してみました｡ (1) th → 親要素からみたﾀｰｹﾞｯﾄまでの位置 (2)sh → ｽｸﾛｰﾙで遷移したﾀｰｹﾞｯﾄまでのY座標(ｽｸﾛｰﾙ量) といった感じでした｡そしてこれらの(1)と(2)の値を5行目で加算している理由がやっぱり解明しません｡｡

匿名回答1号さんのｺﾒﾝﾄ
絵に描いてごらんよ｡

匿名質問者さんのｺﾒﾝﾄ
ありがとうございます！絵に描いてみてるんですが､理解力が乏しいせいで分かりませんでした｡｡もう少し粘ってみます！お手数お掛け致しました！

匿名回答1号さんのｺﾒﾝﾄ
4 から 2 に移動しようとしているところ｡ >|| 隠れている部分 +-----------------------+ | | | | この距離を scrollTop に設定する | | | V | #chapter 2 ------|--- | A | | | | | sh| | |th.top | | | | | V | | +-------------------------+ | #chapter 4 | 見えている部分 | | | | ||< th.top は負の値だからね｡

匿名質問者さんのｺﾒﾝﾄ
わ！ありがとうございます！理解できました！ th.topの値は､あくまで｢表示領域を基準とした値｣ということでよろしかったでしょうか？ここでいうと､｢表示領域を基準としたchapter2までの距離｣という理解です｡いままで私が理解していたのは､overflow:auto;を指定した要素の左上を常に基準として考えてたため､shのｽｸﾛｰﾙ量とth.topのﾀｰｹﾞｯﾄまでの距離が必ず正の値で､しかも同じ値になると考えてしまってました｡ sh = th.top ( 正の値)

匿名質問者さんのｺﾒﾝﾄ
表示領域というのは見えている部分になるので､ここでいうchapter4を基準にしてchapter2までの距離という感じです｡

匿名回答1号さんのｺﾒﾝﾄ
分からなくなったら､ﾄﾞｷｭﾒﾝﾄ読もうぜ｡ >http://api.jquery.com/position/:title> .position() Returns: Object Description: Get the current coordinates of the first element in the set of matched elements, <u style="color:red;">relative to the offset parent</u>. << 英語の意味は正確に分からなくても､"relative" ってところだけ気になれば､後は確認してみれば分かる｡飛び先の chapter 4 (Caption だったね...) などの offset parent は､それを囲んでる ".scroll" ｡ ".scroll" の天辺が､offset child の top = 0 の位置になります｡＃というのは､既に蛇足だね

匿名質問者さんのｺﾒﾝﾄ
ありがとうございます！大変勉強になりました｡ html構造からみて相対位置scrollを見ていたので､変に混同しちゃってました｡｡貴重なお時間をありがとうございました！