【Javascript】スムーススクロール | Wood-Roots:blog

2012
07/18

スムーススクロール

今や定番となった感もありますが、ページ内リンクをスクロールしながら遷移するスムーススクロールを手っ取り早く実装する場合、以下のスクリプトになります。

1
2
3
4
5
6
7
8
9
10
11
12
(function($){
$(function(){
$('a[href^=#]').on('click',function(){
$('body,html').animate({
scrollTop: $($(this).attr('href')).offset().top
},2000);
 
return false;
});
});
})(jQuery);

実際の設置例

見た感じ特に問題なさそうなのですが、アニメーションのスピードがいつも同じ（上記のスクリプトでは2000ミリ秒でアニメーションが完了するように動く）のため、多く戻る場合と少なく戻る場合で速度の差が出てしまいます。

そこで開始地点とゴール地点の距離を取得し、速度をなるべく同じように見せる処理を考えました。

ADs

戻る位置と現在の位置の距離を取得し、速度を変更した例

実際の設置例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function($){
$(function(){
$('a[href^=#]').on('click',function(){
var goal = $($(this).attr('href')).offset().top;
var cr = $('html, body').scrollTop();
var speed = Math.abs(goal - cr);
$('body,html').animate({
scrollTop: goal
},speed);
console.log(speed);
return false;
});
});
})(jQuery);

speedという変数が上記例では「現在のスクロール位置　-　ゴール地点のスクロール位置」となり、そのままanimateの第2引数に突っ込んでいます。早くしたい場合は1以下の数値をかけると（spped*0.5など）早くなります。

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。

Category

Archive

Search

Social