ScrollPress

JavaScript

スムーズなアニメーションのスクロールトップ実装「ScrollPress」

ScrollPressは、スムーズなアニメーションによるスクロールトップを実装することができるjQueryプラグインです。スクロールトップボタンもアニメーションで表示されます。オプションもかなり豊富なので、カスタマイズ性にも優れています。

ScrollPress

デモ

デモでは下へスクロールしていくと、右下にトップへ戻るためのボタンがアニメーションとともに表示されます。ここをクリックするだけで、スムーズなアニメーションで画面上部までスルスルとスクロールされます。

ランディングページや長文記事が多いブログなど、縦長のページにはピッタリの機能ですね。

また、デモでは左側にID1〜ID5までの項目も設置されており、いずれかのIDをクリックするとその場所まで自動でスクロールされます。もちろん、こちらもアニメーション付きでのスクロールになります。

縦長でボリュームのあるページだと、目的の場所を探すのは大変なので、このように自動で目的の場所までスクロールされるメニューはとてもありがたいですね。

ScrollPressにはオプションもたくさん用意されています。scrollPress、duration、easing、btn_state、btn_icon、btn_container、btn_threshold、btn_inlineStyle、btn_style、btn_fadeAnimation、fadeInClassなどなど、他にもいろいろな項目によるセッティングが可能です。

多彩なオプションを利用して、自分好みにカスタマイズして実装したい人にもピッタリの仕様といえます。

というわけで、スムーズなアニメーションによるスクロールトップを実装したい人は、ぜひ「ScrollPress」を活用されてみてはいかがでしょうか。

ScrollPress

関連記事

  1. Hover Carousel

    JavaScript

    超軽量なホバーカルーセルを実装できる「Hover Carousel」

    Hover Carouselは超軽量なホバーで動作するカルーセルを実装…

  2. share-this

    JavaScript

    テキストを選択してシェアできるMediumライクな「share-this」

    share-thisはテキストを選択して手軽にTwitterやFace…

  3. Easy Responsive Tabs to Accordion

    JavaScript

    レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsi…

    今すぐにでも使いたいjQueryプラグインを見つけたので備忘録。レスポ…

  4. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

  5. Inspiration for Grid Loading Animations
  6. no-image

    JavaScript

    サイドバーをフローティングできる「FloatSidebar.js」

    FloatSidebar.jsはサイドバーをフローティングできるVan…

最近の記事

  1. フレンチトーストや自家製ソーセージ
  2. ハレイワ スムージー
  3. クローバーで淹れたコーヒー
  4. 雪が降る日本海

アーカイブ

PAGE TOP