簡単コピペ！ブログ内でトップページへ上るボタンの実装方法！

こんにちわ！

らすにゃです♪

自身のブログを育てるのって楽しいですよね＾＾

こうしたらもっと見やすくオシャレに！ってのは、とても良いことだと思います！

今回は、記事を見ているときに

上まで戻るの大変だなーと思いました。

特にスマホでの操作時ですね！

ここで、便利なのが、

トップへ戻るボタンです！

よくあるのが、↑アイコンタップしたら上へ参ります！ってやつですね。

私のブログ内でも実施したるぜ！と思いまして＾＾

色んな方の記事を参考に実施してみました！ 

中でも私が、参考にさせて頂きましたのは、

demacassette2.hateblo.jp

www.hatena-memorandum.com

などですね＾＾

実際に私が、使用していますのは、下記のコードになります＾＾

▼デザイン→カスタマイズ→ヘッダー→タイトル下

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$("#toggle").on("click", function() {
$(this).next().slideToggle();
});
$(window).resize(function(){
var windowWidth = $(window).width();
var p = 767;
if(windowWidth > p){
$(".global-menu-normal > .menu-instance > ul").show();
} else {
$(".global-menu-normal > .menu-instance > ul").hide();
}
});
});
</script>

 ※コピペでOKです！

スマホの場合は、ヘッダータイトル下に

上記ソースコードをコピペ！

▼デザイン→カスタマイズ→フッダー

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function () {
/** ページトップ処理 **/
// スクロールした場合
$(window).scroll(function() {
// スクロール位置が200を超えた場合
if ($(this).scrollTop() > 200) {
$('#pagetop').fadeIn();
} else {
// ページトップへをフェードアウト
$('#pagetop').fadeOut();
}
});

// ページトップクリック
$('#pagetop').click(function() {
// ページトップへスクロール
$('html, body').animate({
scrollTop: 0
}, 300);
return false;
});
})(jQuery);
</script>

<a id="pagetop" href="#top" class="page_top" style="display: none;">上へ参ります</a> 

スマホ版では、フッダー下へコピペでOKです！

 ▼デザイン→カスタマイズ→デザインCSS

/* ページトップへ戻るボタン */
#pagetop {
position:fixed;
bottom:10px;
right:10px;
padding:10px 20px;
color:#00BFFF;
font-size:20px;
text-decoration:none;
background:#000;
}

/* ページトップへ戻るボタン：ホバー時 */
#pagetop:hover {
background:#e74c3c;

スマホの場合は、ヘッダー内にコピペ！

※上記をコピペする際は、上下に<style type="text/css">ここに上記のソースコード</style> をお忘れずに

これで表示してみたください！

私のブログでも実施しておりますので是非参考に＾＾

www.lasnya.com

以上！らすにゃでした＾＾

twitter.com