WordPressのプラグインを使わずにJqueryでページTOPへ戻る追従型のボタンを付ける

13032501

ページのトップへ戻るってボタンです。
jqueryのプラグインになります。
スクロールすると右下に現れ追従します。するっとスクロールしながらトップに戻ると消えます。
このサイトでも使ってます。

まずは下記サイトよりjquery.scrollUp.jsをダウンロードします。
Scrollup.js-gethub

headよりjsファイルを読み込みます。他にjquery本体も必須。
wordpressでの例

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.scrollUp.js"></script>

設置するページ(大体はheader.phpのhead内)にスクリプトを記述

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

ページに設置
画像を使った設置方法(一例)です。フッターの中に下記のように記述します。
記述方法は自由ですがidにscrollUpを入れるのをお忘れなく。

<p id="scrollUp">
<a href="#top"><span></span>Back to Top</a>
</p>

CSSの設定例

下記の例は下にスクロールすると、ブラウザの右側に右と下に30px間をあけてボタン(画像)を表示させる例です。
参考画像です。透過したpngファイルです。ご利用の際はダウンロードの上ご使用ください。
画像DL
back_top
#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; */画像のURL/*
}

may the force be with you