戻るボタン

 ＜ページトップに戻るボタンについて＞

ＰＣ版とスマホ版で作成しましたので参考に紹介します。


対象のブログ：bloggerです。

スマホの時は「トップに戻る」ボタンを下にスクロールしたときは表示しスクロールしない場合や上に戻したときは消したかったのですが、その制御をプログラミングをす事ができなかったのでＰＣの時のアイコンとスマホの時に表示されるアイコンを2つ自作しそれを使うようにしました。下記がそのプログラム内容です。

・アイコンの画像をパソコンの*jpgとし、ブログのページで作成しました。

アイコンを作成した、ページは保存のみ行いました。

画像の右クリックでそれぞれのアイコンのアドレスを取得しました。

<html> 

 <!-- ページトップボタン -->
<div class='page-top-button'>
  <a href='ブログのトップページのＵＲＬ' id='back-to-top-button_pc'>
    <img class='page-top-button_pc' height='auto' src='ＰＣ版アイコンのアドレス' width='40'/></a>
  <a href='ブログのトップページのＵＲＬ' id='back-to-top-button_sp'>
    <img class='page-top-button_sp' height='auto' src='スマホ版アイコンのアドレス' width='20'/></a>
</div>

上記の、「ブログのトップページのＵＲＬ」を「#」にすると展開したページの上に戻る様になりました。

上記の、「Ｃ版アイコンのアドレス」や「マホ版アイコンのアドレス」は本ブログの新規ページで作成した画像のURLをきさいしました。

ページのトップへ▲

<css>

/* -----------------------------------------------------------------------------------------
    ページトップボタン 下にスクロールしたときに表示（ＰＣ・スマホ別）
-------------------------------------------------------------------------------------------- */

.page-top-button {
  display: block;
  position: fixed;
  bottom: 45px;
  right: 4%;
  z-index: 99; /* 他の要素に隠れないように前画面に表示する。 */
}
.page-top-button a {
  font-size: 25px;
  font-weight: 900;
  /* color: #333;
  background: #fff; */
  padding: 5px 15px;
  opacity: 0.8;
}
.page-top-button a:hover {
 /* color: #eee;
  background: #666; */
}
 .page-top-button_sp {
  display: none; /* スマホの戻るボタンを消す */
 }
/* レスポンシブ設定 */
@media screen and (max-width: 768px) {
  .page-top-button_sp {
    display: block;    /* スマホの戻るボタンを表示する */
    top: 85%;
    right: -8px;
  } 
 .page-top-button_pc {
  display: none; /*パソコンの戻るボタンを消す */
 }

  .page-top-button a {
    display: inline-block;
    font-size: 20px;
    padding: 6px 12px;
    border-radius: 50% 0 0 50%;
    /* color: #333;
    background: #ccc; */
    opacity: 0.5;
    z-index: 99;
  } 
}
＜css＞
/*--------------------------------
戻るボタンにマウスを乗せると文字を吹き出す
---------------------------------*/
<style type="text/css">  　　/*bloggerで書くとエラーになる*/
.balloonoya {
  position   : relative;                /* 指定した分だけ相対的に移動 */
 }
.balloonoya:hover .balloon {
  display: inline;                /* インライン要素として表示 */
}
.balloon {
  position   : absolute;                /* 親要素を基準 */
  display: none;                        /* 要素を非表示 */
  padding: 2px;                         /* テキストの前後の余白 */
  background-color: rgba(102, 102, 255, 0.50);       /* 背景色（透明度） */
  width:100px;                          /* 吹き出し全体の幅 */
  left : -100%;                           /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
  color: #000000;                       /* 文字色指定 */
}
.balloon:after{
  border-left: 12px solid rgba(102, 102, 255, 0.50);   /* 吹き出し口の幅・色 */
  border-top: 10px solid transparent;     /* 吹き出し口の高さ１／２ */
  border-bottom: 10px solid transparent;  /* 吹き出し口の高さ１／２ */
  right: -32px;                           /* 吹き出し口の位置調整 */
  top: 330%;                                /* 吹き出し口の縦位置 */
  content: "";                       /* コンテンツの挿入 */
  position: absolute;                /* 親要素を基準 */
}
</style>

＜HTML＞
<div class='balloonoya'>
  <span class='balloon'>トップに戻る</span>

【困っている事】
Q：上記で本サイトの右下に表示されている▲のボタンは、表示されますが
はじめはボタンが消えているが、スクロールしたとき現れるようにするにはJS等を
利用しなくCSSだけでできないでしょうか？
A：JSもしくは専用のフォーマットでブログを作成しないといけないようです。



会社経験と、IT関連の国家資格などを生かしITの関連知識の参考や自身のスキルアップなどを目標に本サイトを開設しました。また皆様に支えられて今日があるので、自身の知識を精一杯発揮し、何か役に立てることはないかと思っています。未熟ものですがよろしくお願いします。

コメント

コメントを投稿

貴重なご意見ありがとうございます。お客様から頂いたコメントは、紳士に受止め、今後の本ブログの運用に参考とさせてもらいます。