2008年12月25日

[jQuery]將Scrollbar捲動至特定位置

jQuery範例:將Scroll bar 捲動至指定的一筆資料,使其能出現在可視範圍內

obj_id :「指定的資料」的 id
300(px):div_zone 距離頁面頂端的高度(ex. banner圖所佔的高度)
div_zone :div 區域的 id

var focus_seat = $('#obj_id').position().top - 300 + $('#div_zone').scrollTop() ;
$('#div_zone').scrollTop(focus_seat);

1. $('#obj_id').position().top :取得「指定的資料」距離頁面頂端的高度
(不是距離 div_zone 頂端的高度;div_zone 往下捲動後而看不到的上方區域,該區高度不會被計算在內)

2. 步驟1的高度 300px = 「指定的資料」目前距離 div_zone 頂端的高度
(div_zone 往下捲動後而看不到的上方區域,該區高度不會被計算在內)

3. $j('#div_zone').scrollTop() :取得 div_zone 目前捲動的高度
4. 「指定的資料」目前距離 div_zone 頂端的高度(步驟 2) + div_zone 目前捲動的高度(步驟 3 )
= div_zone 欲捲動到「指定的資料」所需的高度

沒有留言:

張貼留言