WordPressのプラグインを使わずにJqueryでページTOPへ戻る追従型のボタンを付ける
ページのトップへ戻るってボタンです。
jqueryのプラグインになります。
スクロールすると右下に現れ追従します。するっとスクロールしながらトップに戻ると消えます。
このサイトでも使ってます。
まずは下記サイトよりjquery.scrollUp.jsをダウンロードします。
Scrollup.js-gethub
headよりjsファイルを読み込みます。他にjquery本体も必須。
wordpressでの例
[php]<script type="text/javascript" src="<?php bloginfo(‘template_directory’); ?>/js/jquery.scrollUp.js"></script>[/php]
設置するページ（大体はheader.phpのhead内)にスクリプトを記述
[php]<script>
$(function () {
$.scrollUp();
});
</script>[/php]
ページに設置
画像を使った設置方法（一例）です。フッターの中に下記のように記述します。
記述方法は自由ですがidにscrollUpを入れるのをお忘れなく。
[php]<p id="scrollUp">
<a href="#top"><span></span>Back to Top</a>
</p>[/php]
CSSの設定例
参考画像です。透過したpngファイルです。ご利用の際はダウンロードの上ご使用ください。
画像DL
[css]
#scrollUp {
position: fixed;
bottom: 30px;
margin-left: -100px;
}
#scrollUp a {
width: 38px;
display: block;
}
#scrollUp span {
position:absolute;
position:fixed;
right:20px; bottom:30px;
width: 38px;
height: 113px;
display: block;
background: url(images/back_top.png) no-repeat center center; */画像のＵＲＬ/*
}
[/css]
may the force be with you
