• カミナリツイッターカミナリtwitter
  • カミナリフェイスブックカミナリfacebook
  • カミナリインスタグラムカミナリinstagram

山陰の情報を発信するカミナリ

ナビ

28

JULY

ウェブFRIDAY 2017 / 7 / 28

スムーズスクロールjQueryプラグイン

Text by Shinji Satoh

  • カミナリツイッターカミナリtwitter
  • カミナリフェイスブックカミナリfacebook

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

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

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

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

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

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

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

 

僕は主にこの機能を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’,
});

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

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

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

 

 

佐藤真司隠しプロフィール画像

TEXT by

佐藤 真司さとうしんじ)

1990年 鳥取県米子市生まれ。
株式会社マジックワード フロントエンドエンジニア。

この人が書いた他の記事を読む