こんにちは、タクゾウです。
仕事で使える、ヘッダ固定・レプポンシブに対応したアンカーリンクをスムーススクロール方法を紹介したいと思います。
アンカーリンクをスムーススクロールさせるコード
わかりやすいようにコメント多めで書いています。
JavaScript
/*
* 「#」リンクをスムーススクロール指定
* @param {number} スクロールにかかる時間
* @param {string} 固定しているheaderのidかclass名(引数に入れない場合は0になります。)
* @return none
*/
function smoothScroll(smoothSpeed, fixedElem){
var headerHeight;
if(arguments.length === 1){
headerHeight = 0;//header固定がない場合
}else if(arguments.length === 2){
headerHeight = $(fixedElem).height();//headerの高さを設定
//リサイズ操作が終わったタイミングで処理
var timer = false;
$(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
headerHeight = $(fixedElem).height();//リサイズ後のheaderの高さを設定
}, 200);
});
}else{
throw new Error('引数が不正です');
}
//リンク#をクリック時に実装
$('a[href^="#"]').click(function(){
var speed = smoothSpeed;//スムーススクロールにかかる時間を設定
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position - headerHeight}, speed, "swing");
return false;
});
}
//DOMがよみこまれた段階で実装
$(function(){
smoothScroll(500, "#sample");
});
使用方法
使用方法は、簡単です。
smoothScroll()で関数をよびだし、引数に必要な数値を入力するだけです。
第1引数:smoothSpeed
スムーススクロールにかかる時間です。500くらいがベストです。(例:500)
第2引数:fixedElem
ヘッダを固定している場合は、アンカーリンクがずれるので第2引数に固定しているヘッダ要素の「id」 or 「class」名を指定してください。(例:”#sample”)
リサイズ時にも対応しているので、レスポンシブサイトでも問題なく動きます。
MEMO
固定ヘッダがない場合は第2引数をしていしないでください。コード説明
リサイズ対応させる処理
PCとSP(スマートフォン)でヘッダの高さが変わることがほとんどなので、
リサイズ処理によって、「headerHeight」を変更する処理をしています。
JavaScript
//リサイズ操作が終わったタイミングで処理
var timer = false;
$(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
headerHeight = $(fixedElem).height();//リサイズ後のheaderの高さを設定
}, 200);
});
MEMO
リサイズ処理は、PCの負担を考えて、リサイズ操作が終わった時に処理が走る実装にしています。アンカーリンクをスムーススクロースさせる処理
「speed」変数にスムーススクロールにかかる時間を設定してあげ、
hrefに「#」が指定してあるリンクをクリックした場合に、アンカーリンク先の要素にanimateで移動させる処理をしています。
JavaScript
$('a[href^="#"]').click(function(){
var speed = smoothSpeed;//スムーススクロールにかかる時間を設定
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position - headerHeight}, speed, "swing");
return false;
});
Web制作を勉強している人の参考になれば幸いです。
コメントを残す