【Vaster2】スクロールすると出現するページトップボタンを実装しよう！【Blogger】

ツイート

シェア

送る

追加

あとで

https://vaster2customtom.blogspot.com/2017/04/vaster2blogger.html【Vaster2】スクロールすると出現するページトップボタンを実装しよう！【Blogger】

2017/04/13 Blogger Vaster2カスタマイズ ページトップボタン

簡単！すこし下にスクロールするとページトップまで戻れるボタンを実装しよう！

1.head内にコピペ！

※編集方法がわからない場合はこちら

script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/～～
の下部分に、以下のスクリプトタグを追加。

<script> $(function() { var topBtn = $('.pagetop'); topBtn.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 450) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); topBtn.click(function () { $('body, html').animate({ scrollTop: 0 }, 500); return false; }); }); </script>

Vaster2じゃないよ～！という方でも追加できます！
head下に以下タグを記載しましょう。

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

2.html内にコピペ！

htmlのほぼ一番下にあたる場所。
画像と同じ所に、以下のリンクタグを追加。

<p class='pagetop'><a href='#container'><i class='fa fa-chevron-up'/></a></p>

3.css部分にコピペ！

この部分を改行して隙間を作りしょう。
(上級者の方は好きな部分へ入れてしまって下さい。)


隙間を作ったら、以下のタグを追加。

.pagetop { display: none; position: fixed; bottom: 30px; right: 15px; } .pagetop a { display: block; background-color: #666; text-align: center; color: #FFF; font-size: 20px; text-decoration: none; padding: 5px 10px; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; }

これだけで完成！

ある程度下にスクロールすると、右下に
ページトップに戻れるボタンが出現します。

簡単ですね！