in
JavaScript
- 05 12月, 2013
ページ内リンク方法の偽装化
前回ページスクロールのカスタマイズで紹介した画面構成において、
ページ内リンクをスムーズにする処理で少し工夫が必要だったのでそちらを記録
まずは基本的なページ内リクのスムーズ化
$('a[href^=#]').click(function() { var speed = 3000; // 移動スピード var href= $(this).attr("href"); // 対象移動先ID名 var position = $(href == "#" || href == "" ? 'html' : href).offset().top; // 対象移動先IDの位置取得 // 指定位置まで移動 $('body,html').animate({scrollTop:position}, speed, 'easeOutQuart'); // アンカー処理を継続しない return false; });
なにをやっているかの説明はコメントの通り。
問題なのは、スクロールによる移動幅を変更した場合
元々存在しているはずの位置に指定のタグが存在していないため、上記5行目で取得している位置に
上記8行目で移動しても、意図していた場所に移動しない問題が発生。
それの回避として下記の処理を追加
$('a[href^=#]').click(function() { var speed = 3000; // 移動スピード var href= $(this).attr("href"); // 対象移動先ID名 // 移動先の取得 var position = 0; if (href.match("^#jump_([0-9]+)$")) position = href.match(/[0-9]+/g) * 1; // ジャンプ用の勝手都合IDはポジション移動とする else position = $(href == "#" || href == "" ? 'html' : href).offset().top; // 指定位置まで移動 $('body,html').animate({scrollTop:position}, speed, 'easeOutQuart'); // アンカー処理を継続しない return false; });
ちょっとズルいですが、
移動先に指定したID名が「jump_」から始まった場合は後続する数字を位置として使う
と勝手なルールを作りました。
# 美しくないですね・・・
# 試みてないですが、スクロール毎に再発火することで正しく位置を指定する事も出来るかも知れません。
ともかくこれにより、HTMLタグ内で指定する位置を数値で指定することが出来るようにすることで
元々も問題としていた、「意図していた場所に移動しない問題」は回避、と言うことで
他に上手い案があれば連絡お待ちしております。