【jquery】「jquery.scrollUp.js」のページトップボタンを画像で実装する方法

ページ先頭にアニメーションで移動するボタンが設置できる、jQueryプラグインの「jquery.scrollUp.js」を紹介します。

HTMLにはページ先頭の記述を入れる必要が無く、簡単に設置できます。

◆まずはデモページをご覧ください。

◆ファイルのダウンロード

必要なファイルは下記URLより一式ダウンロードできます。

デモページのファイルも一式ダウンロードできるようにしたので、そちらをダウンロードしてもOKです。

https://github.com/markgoodyear/scrollup

◆「jquery」の読み込み

下記をHTMLに記述。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="js/jquery.scrollUp.min.js"></script>　（パスは任意に変更）

◆HTML

</body>のすぐ上あたりに下記を記述。オプションも色々設定可能です。

<script>
$(function () {
$.scrollUp();
});
</script>

◆オプションを設定する場合

<script>
$(function () {
$.scrollUp({
scrollName: 'scrollUp', // 要素ID
scrollDistance: 300, // 要素を表示するまでの距離 (px)
scrollFrom: 'top', // 'top' か 'bottom'
scrollSpeed: 300, // スピード (ms)
easingType: 'linear', // スクロールの動き (参照サイト：http://easings.net/)
animation: 'fade', // Fade, slide, none
animationSpeed: 200, // アニメーション速度 (ms)
scrollText: 'Scroll to top', // 要素のテキスト
scrollTitle: false, // 必要に応じてカスタム<a>タイトルを設定
scrollImg: true, // イメージを使用するにはtrue
activeOverlay: false, // scrollUpアクティブポイントを表示する色を設定
});
});
</script>

◆CSS

ページトップ画像のパスやサイズは任意に変更してください。

#scrollUp {
bottom: 20px;
right: 20px;
background-image: url("../img/top.png");
width: 200px;
height: 150px;
}

デモページのファイル一式を希望の方はファイルをダウンロードしてください。