scrollUp

JavaScript

スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」を使ってみました。何気にあったら便利な機能ですよね。現在位置が上にいる時は非表示になっているんですが、下へスクロールしていくとボタンが表示されます。固定配置なのでスクロール中は常に表示されるようになります。ということで、以下、使い方です。

[ads_center]

使い方

jQueryとダウンロードしたプラグインを読み込みます。プラグインフォルダにはボタンのCSSテーマデザインもあるのでそちらも任意で読み込みます。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.scrollUp.js"></script>
<script>
$(function () {
    $.scrollUp();
});
</script>

これだけでOKです。とてもシンプルな使い方ですね。

ボタンデザインのテーマファイルは3種類あり、Text link、Pill、Tabになります。自分でフルカスタマイズしたい場合は以下のようにscrollUpというid名をCSSでデザインしていけばOKです。

#scrollUp {
    color: #fff;
    background: #ccc;
    ・・・略・・・
}

オプションではアニメーションスピードや表示されるテキストを変更することもできます。詳しくは公式サイトでご確認ください。

関連記事

  1. jQuery Countdown

    JavaScript

    手軽に使えるカウントダウンタイマーを実装できる「jQuery Countdown」

    jQuery Countdownは手軽に使えるカウントダウンタイマーを…

  2. ToProgress

    JavaScript

    画面上部に軽量なプログレスバーを実装できる「ToProgress」

    ToProgressは画面上部にシンプルで軽量なプログレスバーを実装で…

  3. Pilpil

    JavaScript

    プログレッシブ形式で画像表示時間を短縮してくれる「Pilpil」

    Pilpilは、ページの画像表示の時間を短縮するためのJSライブラリで…

  4. jQuery TextFill

    JavaScript

    テキストをリサイズしてコンテナにフィットさせる「jQuery TextFill」

    jQuery TextFillはテキストをリサイズしてコンテナにフィッ…

  5. Filterable Product Grid
  6. Toast

    JavaScript

    アニメーション付きでスタッキングしていくメッセージ通知「Toast」

    Toastはアニメーション付きのメッセージ通知を表示することができるj…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. cheero USB-C PD Charger 60W
  2. DY-S01
  3. OWL-QI10W04
  4. BQ-CC87L

アーカイブ

PAGE TOP