こんにちは、金曜担当の佐藤です。

突然ですが皆さんスムーズスクロールってご存知でしょうか？

インターネットを見ている時にクリックすると同じページ上のどこかにジャンプするボタンなどを見たことがあると思います。

そんなボタンをクリックしたときにワープするように画面が変わるのではなくて、画面をスクロールさせて目的の場所に移動させることをスムーズスクロールと言います。

カミナリマガジンでも導入してまして画像の赤線部をクリックで動作します。

これを見ている今も右下あたりにあると思うので、ちょっと押してみましょう♪

文章より実際見てみるほうがわかりやすいですもんね。

僕は主にこの機能をjQueryで書いています。スムーズスクロール自体はとても簡単であまり時間がかかるものでもないのですが、利用頻度が結構多いです。なので作業効率化のためにjQueryプラグインを作ってみました。

コチラ：スムーズスクロールのプラグイン

コンセプトは元のスタイルはなるべく崩さず汎用性を持たせシンプルに使い勝手良く！を目指して作ってみました。

使い方は

このファイルをjQueryを読み込ませた後に読み込ませ。

jsファイルでクリックイベント持たせたい要素にsmoothScroll();を適用させます。

例：$(‘.page_top’).smoothScroll();

これでpage_topをクリックしたらページの一番上まで戻るようになります。ただこれだけではシンプルすぎてちょっとものたりないのでオプションも用意してます。

オプション一覧

destination → 目的地を設定、IDもしくはクラス名、タグを指定する。：初期値’body’。
movementTime → スクロールにかける時間を設定、数値で指定する：初期値400。
centering → スクロールしたとき目的地の表示位置を画面中央に設定するかどうか。初期値：false。
adjustment → スクロール位置をずらす設定、数値で指定する。指定分下にずれる。centeringがtrueの時は真ん中よりずらす。：初期値0。
easing → イージングの設定、初期値’linear’。

使用例

$(“#toTop”).smoothScroll({
destination:”#top”,
movementTime:1000,
adjustment:500,
easing:’ease-out’,
});

これでヘッダー分ずらしてスクロールさせたりスクロールにより動きをもたしたりすることが可能になりました。

一応オプションや説明書きはプラグインの中にも記入してあります。

単純なプラグインですが時短によかったら使ってください。