スマホでもＰＣでも
スクロールばかりが続くと
一気に戻れたらいいのに
なんて思ってしまうんですよね
特にスマホだと スクロールくらいしか 戻る手段を知らないので
じゃまくさいなあと思うこともあったり・・・
そこで
はてなブログ トップに戻るボタン
で 検索してみました
そしたら
トップに戻るボタンについて
書いてくださってるサイトさんがありました！
で
書いてあるとおりにやってみました！
でも・・・
何も表示されませんでした・・・
がっくり・・・
うーん
何がおかしいんだろう・・・と
書いてくださってるものを見直しながら頭をひねっていたら
気がついたことがありました
使われているのは
font awesome というフォント扱いできる記号のようなもの
これを使うためには読み込んでおかないといけないものがあるんです
それがないと 表示されないんですね
で それをやったら ちゃんと表示されました！
トップに戻るボタンを表示する
デザイン ＞ スパナマーク ＞ ヘッダ ＞ タイトル下
以下をコピペしてください
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
デザイン ＞ スパナマーク ＞ フッタ
以下をコピペしてください
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function () {
/** ページトップ処理 **/
// スクロールした場合
$(window).scroll(function() {
// スクロール位置が500を超えた場合
if ($(this).scrollTop() > 500) {
$('#pagetop').fadeIn("slow");
} else {
// ページトップへをフェードアウト
$('#pagetop').fadeOut("slow");
}
});
// ページトップクリック
$('#pagetop').click(function() {
// ページトップへスクロール
$('html, body').animate({
scrollTop: 0
},"slow");
return false;
});
})(jQuery);
</script>
<a id="pagetop" href="#top" class="page_top" style="display: none;"><i class="fa fa-arrow-circle-o-up fa-3x"></i></a>
デザイン ＞ スパナマーク ＞ デザインCSS
以下をコピペしてください
/* ページトップへ戻るボタン */
#pagetop {
position:fixed;
bottom:10px;
right:10px;
padding:10px 20px;
color:#dcdcdc;
text-align:center;
}
/* ページトップへ戻るボタン：ホバー時 */
#move-page-top:hover{
color:rgba(0,0,0,0.8);
}
これだけです
上向きの矢印がでたらＯＫです！
今見てたら
やはり これがあるほうが
お仕事でブログを使われてる方には有利のようです
ぜひトライしてみてくださいね
rednote.hatenablog.jp
