スムーススクロール

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

実際の設置例

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

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

AD

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

実際の設置例

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

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

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