以前に投稿した「先頭に戻るボタンを常に右下に表示する方法」の派生です。
今回はjQueryを使用して、ある程度スクロールした時に先頭に戻るためのボタンが右下に表示する方法をご紹介します。
便利なjQueryのプラグインを使った方法です。
まずはscrollUp jQuery pluginをダウンロード
scrollUp jQuery pluginkからjQueryプラグインとスタイルシートなどが入ったzipファイル(scrollup-master.zip)をダウンロードします。
次にjQueryもダウンロードしておきます。
これで必要なファイルは全て揃いました。
今回は最も簡単に表示する方法を紹介します。利用するファイルは以下の3ファイルです。
- jquery-1.10.2.min.js （※バージョンはダウンロード時点によって異なります。）
- jquery.scrollUp.js （※scrollup-master.zipを解凍したフォルダのjs内にあります。）
- tab.css （※scrollup-master.zipを解凍したフォルダのcss/themes内にあります。他のcssでもOKです。）
外部ファイルを読み込む
今回は外部ファイルを読み込むだけなので、全てHTMLだけで書くことができます。
headタグの中でjsファイルとcssファイルを読み込みます。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollUp.js"></script>
<link rel="stylesheet" type="text/css" href="tab.css" media="all">
</head>
scroolUpを表示する
headタグとbodyタグの間でjQueryスクリプトを呼び出すscriptタグを書きます。
～省略
</head>
<script>
$(function () {
$.scrollUp();
});
</script>
<body>
～省略
これで準備は完了です。
実際にブラウザで読み込んでボタンが表示されるかどうか試してみてください。デフォルトの設定のままだと、ブラウザの上部から300ピクセルをスクロールした時点で先頭に戻るボタンが表示されるようになっていますので、ある程度長いHTMLでないとボタンが表示されませんのでご注意を。
スクリプトのオプション
自分流にカスタマイズしたい場合は以下のオプションで変更することができます。
$(function () {
$.scrollUp({
scrollName: 'scrollUp', // Element ID
topDistance: '300', // Distance from top before showing element (px)
topSpeed: 300, // Speed back to top (ms)
animation: 'fade', // Fade, slide, none
animationInSpeed: 200, // Animation in speed (ms)
animationOutSpeed: 200, // Animation out speed (ms)
scrollText: 'Scroll to top', // Text for element
activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
});
});
本日は以上です。
- 投稿タグ
- JavaScript
