VBAの勉強を始めてみた

タイトルの通りVBAの勉強を始めました。仰々しくなく、シンプルな形で効率化を図ることを目指しています。VBA以外の話題もあるよ(笑)

「PageTopへ戻る」ボタンを1ステップで実装してみる

皆さんのブログ記事を見ていて、よく目にする「PageTopへ戻る」ボタン
あれ、いいなぁ~と思いながら、いつも指をくわえて見ていたので、今回は自分のブログにも実装してみたいと思います。
最速かもしれない(←ぇ)1ステップで、実装までを実現してみます。

目次

 

 Step.1 HTMLへの記載(jQuery読込み、JavaScript記述、ボタン用画像の設定とCSSの設定)

 

下記をHTML編集モードの本文にコピペします。(HTML内の<body>~</body>にあたります) 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(function () {
    var topBtn = $('#page-top');
    topBtn.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 500) {    //ボタンを出現させるスクロール位置をpxで指定
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 300);	//完了までの時間をミリ秒単位で指定
        return false;
    });
});
</script>

<p id="page-top" style="position: fixed;bottom: 5px;right: 10px;cursor : pointer;z-index: 99;" hidden>
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/kouten0430/20171208/20171208181157.png">
</p>

これで実装完了!(このページの「PageTop」ボタンが、上記で実装したものです)

 

赤字の箇所は、お好みで変更して下さい。上から順に説明します。

  • 「1.12.4」:jQueryのバージョンです
  • 「500」:ページ上端からスクロールしていって、PageTopボタンが出現するまでのピクセル数です
  • 「300」:PageTopボタンを押してページ上端に到達するまでの時間(ミリ秒)です
  • 「5px」:bottom 画面下からの距離を指定する
  • 「10px」:right 画面右からの距離を指定する
  • 「HTTP://~」:ボタンに使用する画像のURLです(上記は、はてなフォトライフのURLです)

 

なお、<body>~</body>内へのコピペであれば、記事ごとにPageTopボタンが配置されます。

<head>要素にコピペすると、はてなブログの場合、全記事(過去記事含む)にPageTopボタンが配置されます。

 

 

補足説明

コードの上から順に補足説明します。

  • <script src="">:jQueryをロードしている部分です。
  • <script>:メインプログラムのJavaScriptjQueryの文法で)を記述している部分です。
  • id="":JavaScriptが制御する要素を指定しています。id名は任意。
  • style="":ボタン位置もろもろを指定するCSSです。1Stepで実装するために、あえてインラインスタイルにしました。
  • position:要素の位置を指定します(fixedでは画面を基準にし、下からの位置、右からの位置などを指定します)
  • pointer:画像を選択した時に、カーソルが指の形になるようにしています。
  • z-index:重なり順序を指定しています。値が大きい要素ほど前面にきます。
  • hidden:JavaScriptが読み込まれて実行されるまでの画像のチラ映りを防止します。
  • <img src="">:文字の代わりに画像を指定しています。 

はてなフォトライフにアップロードした画像は、画像を右クリックでURLを取得できます。

 

なお、jQueryjQueryを使ったJavaScriptの記述については、専門書や専門のサイトを参照してくださいませ(;^_^A
ではでは。

 

Milkさんの記事を参考にさせていただきました!

www.milkmemo.com

 

Illustrated by 霜山 シモンさま

f:id:kouten0430:20171209140506p:plain