【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