[blogger]下から上まで一気に飛ぼう！「ページトップに戻る」ボタンを付ける。そして回転させる・・・。

いくつかのサイトで、画面を下にスクロールすると現れる画面最上部に戻るボタン。

■【Webクリエイターボックス】(Click New Tab)

こことか、

■【Twitter、Facebookボタンなどをまとめて簡単設置｜忍者おまとめボタン】(Click New Tab)

あ、ここでもでますねｗ

こういうのです。
こういうのが！付けてみたい！って思って、設置しました。

参考にさせて頂いたのは

tips! | スムーススクロールjQuery「Animated Scroll to Top」

一定間隔下へスクロールするとページトップに誘導するアイコンが現れて、クリックするとスーッと上へ参りまーすできるアレです。 ...

WEB,HTML,CSS,Javascriptに関連するBLOG: ページスクロール JQuery「Animated Scroll to Top」簡単設置

ブロガー（blogger）にJavaScriptを設置するには一言多いプログラマーの独り言

ブロガー（blogger）にJavaScriptを設置する方法は、いろいろあると思いますが、外部ファイルを読み込めない場合、ソースを直接埋め込んでしまう方法がお勧めです。ソースを管理する上で、視認性が ...

主にこちらのサイトです。ありがとうございます!

さて、手順ですが、

スクリプトの設置
CSSの追加
HTMLにさらに追加

という、主に、【tips! | スムーススクロールjQuery「Animated Scroll to Top」】(Click New Tab)
こちらを参考に進めました。

スクリプトの設置

まずは、HTMLの編集で、<head> </head>の間に、以下のコードを加えます。

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){
 // hide #back-top first
 $("#back-top").hide();
 
 // fade in #back-top
 $(function () {
  $(window).scroll(function () {
   if ($(this).scrollTop() > 1000) {
    $('#back-top').fadeIn();
   } else {
    $('#back-top').fadeOut();
   }
  });
  // scroll body to 0px on click
  $('#back-top a').click(function () {
   $('body,html').animate({
    scrollTop: 0
   }, 400);
   return false;
  });
 });
});
</script>

コードは、このサイト用に変更を加えてますので、参考にさせて頂いたコードから変えている部分がありますが・・・

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

特にこのjqueryのGoogle AJAX API使用するというコード。

参考サイト(Click New Tab)では、

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

こういった記述になっているのですが、この記述ではどうもうまくいかず、bloggerだから、変更か何かよくわからないものがあったのかな？

・・・とGoogle先生に聞いたところ、変更があったがどうかはともかくとして、
■【ブロガー（blogger）にJavaScriptを設置するには一言多いプログラマーの独り言】(Click New Tab)
こちらのサイトで紹介されていたコードで、すんなり動く事ができまして、一安心。

ただ、参考サイトの記述で、間違いはないはずなので、うまく動かない場合に＜script language...＞を試して貰えるといいかもしれません。

その他の変更箇所。

1.) アイコンの表示タイミング

if ($(this).scrollTop() > 1000)

この数字の【> 1000】の部分で、下にどれくらい画面をスクロールするとアイコンが浮かび上がるのかを設定できます。参考サイトから持ってきた数字だと、ちょっとホイール回しただけでアイコンがでるので、こんなに早くは要らないかな？と、1000に変更。

1000くらいだと、わたしの環境では、ホイールを3回回すくらいでアイコンが現れます。

2.) トップに戻るスピード

// scroll body to 0px on click
  $('#back-top a').click(function () {
   $('body,html').animate({
    scrollTop: 0
   }, 400);

こちらの【400】の部分は、アイコンをクリックした時に、どれくらいのスクロールスピードでトップに戻るかを設定出来ます。400は、スッっという感じ（・・

CSSの追加

スクリプトの設置が終わったら、次にCSSの追加をします。単純といえば単純なのですが、テンプレートデザイナーページの、アドバンス設定でカスタムCSSの追加画面に行きます。

そこのフォームに・・・

/* backtotop */
#back-top {
     position: fixed;
     bottom: 5px;
     margin-left: 85%;
}
#back-top a {
     width: 108px;
     display: block;
     text-align: center;
     font: 11px/100% Arial, Helvetica, sans-serif;
     text-transform: uppercase;
     text-decoration: none;
     color: #bbb;

     /* transition */
     -webkit-transition: 1s;
     -moz-transition: 1s;
     transition: 1s;
}
#back-top a:hover {
     color: #000;
}

/* arrow icon (span tag) */
#back-top span {
     width: 52px;
     height: 51px;
     display: block;
     margin-bottom: 0px;
     background: #eae5e3 url(※用意した画像のURL) no-repeat center center;    

     /* rounded corners */
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;

     /* transition */
     -webkit-transition: 1s;
     -moz-transition: 1s;
     transition: 1s;
}

#back-top a:hover span {
     -webkit-transform: rotate(720deg) scale(1.2);
     -moz-transform: rotate(720deg) scale(1.2);
     transform: rotate(720deg) scale(1.2);
     opacity:0.5;
}

このようにコードを追加するだけ。

1.) 上から説明。背景を含めた、画像の表示位置

/* backtotop */
#back-top {
     position: fixed;
     bottom: 5px;
     margin-left: 85%;
}

最初の【/*】で始まる文は、追加したコードを分かるようにするための説明文です。

次から、【position:】がスクロールしても画面に固定するために【fixed;】に指定。
【bottom:】が、画面の下からの位置指定。【margin-left:】が左からの位置・・・これは多分%指定の方がいいかな？デスクトップサイズが変わった時の為に%がいいような気がしています。

2.) 表示テキストの設定

#back-top a {
     width: 108px;
     display: block;
     text-align: center;
     font: 11px/100% Arial, Helvetica, sans-serif;
     text-transform: uppercase;
     text-decoration: none;
     color: #bbb;

     /* transition */
     -webkit-transition: 1s;
     -moz-transition: 1s;
     transition: 1s;
}
#back-top a:hover {
     color: #000;
}

これは、「多分」矢印画像の下にテキストを表示する場合の指定箇所。うん、きっとそうだｗ
テキストは消してしまってますが、そういうことも出来るようです。

3.) 矢印アイコンの設定

/* arrow icon (span tag) */
#back-top span {
     width: 52px;
     height: 51px;
     display: block;
     margin-bottom: 0px;
     background: #eae5e3 url(※用意した画像のURL) no-repeat center center;    

     /* rounded corners */
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;

     /* transition */
     -webkit-transition: 1s;
     -moz-transition: 1s;
     transition: 1s;
}

こちらでは、本体とも言える？矢印の画像を設定。

わたしは、こんな画像を【PicMonkey - Photo Editing Made of Win】と、【Pixlr】を利用して、手抜きで作りました。

Pixlrで、サイズを決めた、真っ白な新規画像を作ってPicmonkeyに、Picmonkeyのスタンプ機能を使って思ったようにデザイン。矢印もスタンプがあるので簡単です。
そうやって作った画像を、適当にbloggerにでもアップ。公開しなくても、画像をアップロードってした段階でPicasaウェブアルバムに入りますので、そこのURLを引っ張ってきます。

また、この画像では、矢印だけでなく背景も一緒に作っていますが、矢印だけの画像で、背景はマウスオーバー時にだけ浮かび上がるようにする事も出来ます。

その場合、このあとの「マウスオーバー時の設定」箇所で、
【background-color: #eee;】
というような背景色の指定の1文を{}の中に足してあげて下さい。

閑話休題・・・。

ほかの部分は、分かると思いますが【width】【height】で横幅と縦幅。bloggerのCSS追加画面では、実際のサイト画面を参照しながらリアルタイムで変化を確認できるので、実際触ってみたほうが早いでしょうが・・・。

4.) マウスオーバー時の設定

#back-top a:hover span {
     -webkit-transform: rotate(720deg) scale(1.2);
     -moz-transform: rotate(720deg) scale(1.2);
     transform: rotate(720deg) scale(1.2);
     opacity:0.5;
}

これは、マウスオーバー時の挙動を指定しています。
ちょっとやってみたくなって、マウスオーバーしたら、矢印が回転するようにしてみました。

それと、【opacity】で50％透過。

これで、マウスオーバー時がわかりやすいかな？って思います。

回転については、CSS3を利用しているので、【CSS3 回転】などでGoogle先生に聞いてみるといいと思います。こんな簡単な指定で、こんなに動くのかとびっくりしましたし、こういったところが面白さなのかな？って少し感じましたので・・・。

更にHTMLに追加

さて、最後です。
最後に、HTMLの編集に戻って、</body>のすぐ上あたりに（<body></body>の間ならどこでも）

<p id="back-top">
    <a href="#top"><span></span></a>
</p>

とコードを追加して終了。
まぁ、どこでもOKですが、>/body<の直前くらいが目安だと思います。

動作がうまくいったか確認してみて下さい。

【<span></span>】の間に文字を書くと画像の下に文字を表示することも出来ます。

こんな感じで、少し長くなりましたが、ページトップにスクロールしながら戻るボタンの追加ができます。jqueryなどを使う時、「bloggerの場合」っていうのが別にある感じで、Wordpressや他のブログサイト用に書かれているものではうまくいかないことが多くて、検索時に【"blogger"】の一文を追加するのが癖になってきました。

あと、矢印の画像ですが、作るのに難しい事はなんにもしてないんですが、こんな画像がいいって思う希少な方がいたら、どうぞご自由に使って下さい。
ただ、わたしのアップURLへの直接リンクは遠慮して頂いて、画像をダウンロードしてからご自分のblogなどに貼り付けて使用して下さい。よろしくお願いします・ｗ・

最後に、参考にさせて頂いたサイトの方々、ありがとうございました。

7 件のコメント:

竹治北野2012/07/24 12:59:00
CSS弄ったこと無かったけど上手くいきました、ありがとうございます。
画像url前の#eae5e3はどう云う意味でしょうか、

テキストを足す場合はどうすれば良いでしょうか？
気が向いた時にでもお答えいただければ嬉しいです。
返信削除
返信
すなふ2012/07/24 19:00:00
コメントありがとうございます。

●画像URL前の#eae5e3 は画像を使わなかったりした時や、このブログで使っているもののように画像が斜めにしてある時などに、背景色を指定したい時の為のものですね。背景色の指定については、http://www.colordic.org/w/などを参考にすると、どんな色になるのか検討しやすいかと思います。
また、#eae5e3自体を消してしまって、背景は無しで、画像表示のみというのも、いいですね。結局私はそうしてます（・・；

●テキストの表示は、「更にHTMLに追加」の部分のコードを、
Back to Top
のようにすると画像の下にテキストが追加されます。
足すだけだと、おそらく横長になるので、幅を調整する場合は、「2.) 表示テキストの設定」の、#back-top a{ のクラス名のCSSで、widthを調整して頂くといいかな？
と思いますよ。

よく分からない部分があればいつでも言って下さいね！
返信削除
返信
けき2012/12/19 17:49:00
やってみました！とってもうまくいきました★
ありがとうございました。
ライトボックスも入れてたけど、その部分が今度はうまく動作しないのでどうしたものか…。ちょっと考えます。
とにかく素敵にくるくる回るのでたのしいです。
本当に有難うございます(*´U`*)
返信削除
返信
すなふ2012/12/20 1:05:00
ありがとうございます！

クルクル回すのは、初めて出来た時にちょっと嬉しくなってしまいますね。
ライトボックスが上手く動作しないとの事ですが・・・ライトボックスってどういう物だろうと気になったりしています。上手く解決できるといいですね(。・ω・。)ゞ
返信削除
返信
嫁子伊達2012/12/26 16:49:00
いつも参考にさせて頂いてます。ありがとうございます。
この上に戻るボタンも、この記事を参考にして作ってみます。
返信削除
返信
すなふ2013/01/04 20:38:00
上に戻るボタンの正式な言い方が未だに分かっていませんが、
うまくいくといいですね！
どうもうまくいかないなどあれば、またコメントなり頂けると幸いです。
返信削除
返信
伊達家2013/01/06 19:09:00
有難うございます。上手くいきました。
返信削除
返信

コメントを追加

Pages

2012/04/28