hiroeleganceのエレガンスとは呼べない日常

WEB屋(コーダー)hiroelegance(ヒロエレガンス)のブログhiroeleganceのエレガンスとは呼べない日常略して「エレ日」です。YouTubeでゲーム実況してます。毎週火曜0時にラジオも配信しています。

【CSS】【JS】スクロールに追従してTOPに戻るリンク

      2017/02/01

このライブドアブログにjQueryで作るスクロールしたら出現してスクロールに追随し、フッターの位置で止まるスムーススクロール
追加しました!

ライブドアブログはFTPも使えるし、
CSSだけじゃなくてブログのHTML側もいじれるのがいいですね!無料だしwww

まず、上部に戻るアイコン画像をネットで拾ってきてFireWorks(開発終わっちゃったよぉ。)で加工

【素材サイト様】
先頭(ページトップ)に戻るボタンの無料アイコンイラストai/eps/png素材

色合いを変えて枠線を付けたもの↓

こんなのでよろしれば保存して使ってください(*・ω・)ノ

色違いとか、線違うバージョンとか欲しい方とかいたら
暇なとき500円くらいでつくりますので、
お声がけください。限定5名様くらいにしようかな。

画像をFTPでアップロード。
<接続先>
ホスト名:ftp.blog.livedoor.com
ユーザー名:お客様のlivedoor ID
パスワード:ご利用中のパスワード
ディレクトリ:/

imgというディレクトリを作って、作成したアイコンをアップロード。

ブログ設定>デザイン / ブログパーツ設定>PC>カスタマイズ

CSSを編集します。

一番外側の要素このブログの場合#container
にwidth: 100%;とposition: relative;追加します。

上部に戻る用のクラス.gotoを一番下あたりにコピペしてください。

div#container {
width: 100%;
background-color: #ffffff;
position: relative;}

.gotop{
position: fixed;
left: 90%;
bottom: 0;
margin:0 0 0 -63px;
}
.gotop a{
width: 92px;
height: 300px;
display: block;
}

次に トップページ、個別記事ページ、カテゴリアーカイブ、月別アーカイブ
にJSとHTMLを追加します。
上部<$OGP$>の下あたり/head直前にJSを貼ります。
(本当は外部ファイルにした方がソースが綺麗だし、推奨されているけどめんどくさかったからこのまま)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".gotop").hide();
$(window).on("scroll", function() {
if ($(this).scrollTop() > 100) {
$('.gotop').slideDown("fast");
} else {
$('.gotop').slideUp("fast");
}
scrollHeight = $(document).height();
scrollPosition = $(window).height() + $(window).scrollTop();
footHeight = $("footer").innerHeight();
if ( scrollHeight - scrollPosition <= footHeight ) {
$(".gotop").css({
"position":"absolute",
"bottom": footHeight
});
} else {
$(".gotop").css({
"position":"fixed",
"bottom": "0px"
});
}
});
$('.gotop a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>

次に、footerの直前にHTMLを挿入します。

<p class="gotop">
<a href="#"><img src="/hiroelegance/img/bg_top_link.png" alt="ページトップへ戻る"></a>
</p>

[保存する]をクリックして、
CSS以外の4つのテンプレートに同じようにJSとアイコンのHTMLをコピペしてください。

画面をスクロールするとにゅきっと出てきますw

 - CSS, JavaScript