MyjQueryPlugins BackToTop plugin
ページの先頭にスクロールさせる「Back To Top」リンクボタン。最近ではいろいろな「Back To Top」を見かけますが、jQueryを使用したエフェクトやデザイン的にもお洒落に作ってある簡単jQueryプラグインをご紹介します。
サンプルを作ってみました。こちらをご覧ください。
→ jQuery「BackToTop」サンプルページ
それでは設置方法を説明します。
まずは、こちらの「BackToTop」のページから一式ダウンロードしてきます。
<head>部分にｃｓｓとJavascriptを指定します。
<!– CSS file –>
<link rel=”stylesheet” type=”text/css” href=”BackToTop.jquery.css” media=”screen” />
<!– jQuery files –>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery-ui.js”></script>
<script type=”text/javascript” src=”BackToTop.min.jquery.js”></script>
そしてHTMLコードの部分に、コンテンツを作成して下さい。
最後に、</body>の直前にてJavaScriptプラグインを設定して完了です。
<script type=”text/javascript”>
$(document).ready(function(){
BackToTop({});
});
</script>
これだけです。
もう少し複雑にカスタマイズしたい場合には、オプションを設定することもできます。
<script type=”text/javascript”>
$(document).ready(function(){
BackToTop({
text : ‘^ Back to top’, // ボタン内に表示させるテキストです。
autoShow : true, // ボタンを自動的に表示したり隠したりします。’ true’ or ‘false’
timeEffect : 800, //先頭までスクロールさせるスピードです。値が小さいほど速くなります。
appearMethod : ‘slide’, //ボタンが現れるときの効果です。 ‘fade’ or ‘slide’ 効果を無効にしたい場合は空にします。
effectScroll : ‘easeOutCubic’ //先頭へスクロール時の効果ですが、戻るスピードが早い時はわかりにくくなります。主なものは下を参照して下さい（＊）。
});
});
- effectScroll のオプション値
linear
easeInOutBack
easeOutQuad
easeOutQuart
easeInOutQuart
easeOutBounce
easeInBounce
easeInOutBounce
サンプルページのソースは以下のとおり、ご参考までに。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="css/BackToTop.jquery.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <style type="text/css"> <!-- body { margin: 8% 10%; } } --> </style> <title>ページの先頭へスクロール。お洒落な「Back To Top」を表示させるjQuery「BackToTop」プラグインサンプル</title> </head> <body> <h1>ページの先頭へスクロール。お洒落な「Back To Top」を表示させるjQuery「BackToTop」プラグインサンプル</h1> <h2>注文の多い料理店</h2> <h3>宮沢賢治</h3> <p> 二人の若い紳士（しんし）が、すっかりイギリスの兵隊のかたちをして、ぴかぴかする鉄砲（てっぽう）をかついで、白熊（しろくま）のような犬を二疋（ひき）つれて、だいぶ山奥（やまおく）の、木の葉のかさかさしたとこを、こんなことを云（い）いながら、あるいておりました。<br /> 「ぜんたい、ここらの山は怪（け）しからんね。鳥も獣（けもの）も一疋も居やがらん。なんでも構わないから、早くタンタアーンと、やって見たいもんだなあ。」<br /> 「鹿（しか）の黄いろな横っ腹なんぞに、二三発お見舞（みまい）もうしたら、ずいぶん痛快だろうねえ。くるくるまわって、それからどたっと倒（たお）れるだろうねえ。」<br /> それはだいぶの山奥でした。案内してきた専門の鉄砲打ちも、ちょっとまごついて、どこかへ行ってしまったくらいの山奥でした。<br /> それに、あんまり山が物凄（ものすご）いので、その白熊のような犬が、二疋いっしょにめまいを起こして、しばらく吠（うな）って、それから泡（あわ）を吐（は）いて死んでしまいました。<br /> 「じつにぼくは、二千四百円の損害だ」と一人の紳士が、その犬の眼（ま）ぶたを、ちょっとかえしてみて言いました。<br /> 「ぼくは二千八百円の損害だ。」と、もひとりが、くやしそうに、あたまをまげて言いました。<br /> はじめの紳士は、すこし顔いろを悪くして、じっと、もひとりの紳士の、顔つきを見ながら云いました。<br /> 「ぼくはもう戻（もど）ろうとおもう。」<br /> 以下略・・・ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="jquery/jquery-ui.js"></script> <script type="text/javascript" src="jquery/BackToTop.jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ BackToTop({ text : '^ Back to top', autoShow : true, timeEffect : 800, appearMethod : 'slide', effectScroll : 'easeOutCubic' }); }); </script> </body> </html> |
あわせてお読みください
jQuery Slider² 【注意】2019/10 こちらの記事は、古くなったため記事をリライトして引越ししいたしました。→ 最新の情報はこちらをご覧ください…
turn.js 以前、画像を本をめくれるようにみれるjQueryプラグインである「FlipPage」をご紹介しましたが、今回ご紹介する「turn.js」はまるで…
SMINT メニューをクリックするとスルスルっと縦スクロールしていって、コンテンツの部分でとまるワンページスクロールのサイトを作りたい方にぴったりのjQuer…
コメントを残す