MyjQueryPlugins BackToTop plugin
ページの先頭にスクロールさせる「Back To Top」リンクボタン。最近ではいろいろな「Back To Top」を見かけますが、jQueryを使用したエフェクトやデザイン的にもお洒落に作ってある簡単jQueryプラグインをご紹介します。

サンプルを作ってみました。こちらをご覧ください。

 jQuery「BackToTop」サンプルページ


それでは設置方法を説明します。





まずは、こちらの「BackToTop」のページから一式ダウンロードしてきます。

<head>部分にcssと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
サンプルページのソースは以下のとおり、ご参考までに。

この記事と関連してると思われる記事: