JA2PTQ Websiteをｽﾏﾎ対応　その5【ｽｸﾛｰﾙ位置に連動して表示される「ﾄｯﾌﾟへ戻る」ﾎﾞﾀﾝ】

ｽﾏﾎ表示は縦に長～い

【ｽｸﾛｰﾙ量を判定して、ﾎﾞﾀﾝの表示・非表示を切り替える】

　ｽﾏﾎで表示すると縦に長～いﾍﾟｰｼﾞになってしまいます。

　情報発信する側としては最後まで見てもらいたいのは山々ですが・・・、読者側にすれば、ﾄｯﾌﾟへ戻るﾎﾞﾀﾝは欲しい所です。

ﾎﾞﾀﾝ　非表示

　記事ﾍﾟｰｼﾞの最下部に<<ﾍﾟｰｼﾞ上へ戻る>>を付けていますが、ｽﾏﾎの場合は、もうひと工夫必要です。

　ﾄｯﾌﾟﾍﾟｰｼﾞの画面には表示しないで、一定量のｽｸﾛｰﾙがあったときに表示するという優れものの「ﾄｯﾌﾟへ戻るﾎﾞﾀﾝ」の作成です。

　現在表示されている位置が「Webページの上端から何ﾋﾟｸｾﾙほどｽｸﾛｰﾙされた位置なのか？」という情報を得る方法として、JavaScriptのﾗｲﾌﾞﾗﾘであるjQueryを使います。

　先ずはHTML中に下記の1行を記述します。

【ﾍｯﾀﾞｰ　jQuery本体読込】

<!-- jQuery本体読込 -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>

　画面右下に固定する「ﾄｯﾌﾟへ戻るﾎﾞﾀﾝ」の画像（btn_to_top.png）を別途作成し、ｱｯﾌﾟﾛｰﾄﾞしておきます。

　CSSで、ﾎﾞﾀﾝの表示位置や大きさを定義し、最初は非表示にしておく「display: none;」も記述します。

【CSS　ﾄｯﾌﾟへ戻るﾎﾞﾀﾝ】

#top-button { /* トップへ戻るボタン */
  position: fixed; /* ←表示場所を固定 */
  bottom: 20px;   /* ←下端からの距離 */
  right: 5px;    /* ←右端からの距離 */
  width: 55px;
  height: 55px;
  line-height: 40px;
  background: #03a9f4;
  color: #555;
  display: none; /* ←最初は非表示にしておく */
}	

#top-button img {
  max-width: 100%;
}

　新規のﾃﾝﾌﾟﾚｰﾄﾓｼﾞｭｰﾙを作成し、ｽｸﾛｰﾙされた量（＝現在のｽｸﾛｰﾙ位置）を判定してﾎﾞﾀﾝの表示・非表示状態を切り替えるJavaScriptを記述します。

【ﾃﾝﾌﾟﾚｰﾄﾓｼﾞｭｰﾙ　ﾄｯﾌﾟへ戻るﾎﾞﾀﾝ】

<div>
<a href="#top" onclick="$('html,body').animate({ scrollTop: 0 }); return false;"><img src="/resources/btn_to_top.png"></a>
</div>

<script type="text/javascript">
$(function() {
   // スクロールしたときに実行
   $(window).scroll(function () {
      // 目的のスクロール量を設定(px)
      var TargetPos = 350;
      // 現在のスクロール位置を取得
      var ScrollPos = $(window).scrollTop();
      // 現在位置が目的のスクロール量に達しているかどうかを判断
      if( ScrollPos >= TargetPos) {
         // 達していれば表示
         $("#top-button").fadeIn();
      }
      else {
         // 達していなければ非表示
         $("#top-button").fadeOut();
      }
   });
});
</script>

　ﾌｯﾀｰに、新規に作成した「ﾃﾝﾌﾟﾚｰﾄﾓｼﾞｭｰﾙ」を読み込む記述をします。

【ﾌｯﾀｰ　ﾓｼﾞｭｰﾙ読み込み】

<div id="top-button">
   <$mt:Include module="トップへ戻るボタン" $>
</div>

　後は、「Googleｸﾛｰﾑﾃﾞﾍﾞﾛｯﾊﾟｰﾂｰﾙ」のｼﾐｭﾚｰｼｮﾝを使って、ﾚｲｱｳﾄの微調整を行います。

Websiteのﾃｰﾏ_ｽﾏﾎ3.0

　テーマ＿スマホ3.0として保存。

blogのﾃｰﾏ_ｽﾏﾎ3.0

　年老いた田舎のﾗｼﾞｵ少年にjQueryが分かるはずもありませんが、紹介記事をｺﾋﾟﾍﾟしｼﾐｭﾚｰｼｮﾝで微調整すれば何とかなります。（先駆者のお陰です。感謝！！！）

JA2PTQ Websiteをｽﾏﾎ対応　その5【ｽｸﾛｰﾙ位置に連動して表示される「ﾄｯﾌﾟへ戻る」ﾎﾞﾀﾝ】

カテゴリ:

コメントする

カテゴリ

JA2PTQ Websiteをｽﾏﾎ対応 その5【ｽｸﾛｰﾙ位置に連動して表示される「ﾄｯﾌﾟへ戻る」ﾎﾞﾀﾝ】

カテゴリ:

コメントする

カテゴリ

JA2PTQ Websiteをｽﾏﾎ対応　その5【ｽｸﾛｰﾙ位置に連動して表示される「ﾄｯﾌﾟへ戻る」ﾎﾞﾀﾝ】