無料ホームページテンプレート Template Party

初心者向けマニュアル公開中。完全無料でホームページを公開しよう!動画マニュアルつき。

fixmenu.jsをカスタマイズし、スクロール中に「ページの上部に戻る」ボタンを出現させる

>> サンプルはこちら

ページを下にスクロールさせると途中で画面右下に「↑」マークがでます。クリックするとページの上部へ移動します。

fixmenu.jsプログラム利用規約

  • 当サイトで配布中のスクリプトは全て有限会社クリタス様に所有権があります。
    当サイト(Template Party)のテンプレート以外へ利用する場合は必ずこちらをお読み下さい
  • フリープログラムにつき、不具合により利用者側に何らかの損害が発生した場合でも当サイト及び開発業者での保障は一切行いません。不具合が出た場合はお手数ですがお知らせ下さい。

設置方法

>> jsファイルとcssファイルのダウンロード

fixmenu_pagetop.jsファイルはfixmenu.jsを元に今回の調整を行なったタイプになります。fixmenu_pagetop.cssはボタンのスタイル用ファイルです。
それぞれ利用中のテンプレートのjsフォルダ、cssフォルダに移動しておいて下さい。

今回は、biz42をサンプルに設置してみます。

  1. まずはトップページ(index.html)を開きます。ダウンロードしたファイルを読み込む為、head内に、
    <link rel="stylesheet" href="css/fixmenu_pagetop.css">
    <script type="text/javascript" src="js/fixmenu_pagetop.js"></script>

    を追加します。貼り付け場所がわからない場合は冒頭のサンプルページのhtmlコード側を見てみて下さい。
  2. 続いてページに戻る用のボタンタグを追加します。
    biz42には、
    <p class="pagetop"><a href="#">↑</a></p>
    というブロックがありますが、これはもともとフッター上部に固定表示されている「↑」ボタンになります。
    今回はこの行は削除し、以下に置き換えます。
    <p class="nav-fix-pos-pagetop"><a href="#">↑</a></p>

以上です。

補足:出現場所を調整したい場合。
現在、上から350pxスクロールした際にボタンが出現するようになっていますが、変更する場合は、fixmenu_pagetop.jsの34行目あたりにある、
offsettop = 350;
の350を変更してみて下さい。