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

NO IMAGEレスポンシブ対応のスタイリッシュなスライドショー実装「offbeatSlider」前のページ

ランダムサイズの画像をかっこいいギャラリーにしてくれる「Flex-box Gallery」次のページFlex-box Gallery

関連記事

  1. JavaScript

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「e…

  2. JavaScript

    テーブルを綺麗なデザインにしてくれたり並び替え(ソート)もできるjQuery「tablesorter…

    jQueryのプラグインで、テーブルをフレキシブルなデザインにしてくれ…

  3. JQuery-SnakeGallery

    JavaScript

    ホバーした方向へエフェクトが追従してくる「JQuery-SnakeGallery」

    JQuery-SnakeGalleryは、ホバーした方向へエフェクトが…

  4. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

  5. Animated Page Transition
  6. JavaScript

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP