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

scrollUp

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

使い方

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;
    ・・・略・・・
}

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

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives