読者です 読者をやめる 読者になる 読者になる

Sherbet

このブログは、amrkとたーくんとkoheとらすにゃの4人が「自由」を目指して奮闘していく【ぶろぐ】です!ジャンルは基本真面目です。なんてったって「自由」を目指してますから!真面目な中でも「自由」にジャンルにこだわらず書いていければと思ってます!

ブログタイトル

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

f:id:lyukey0902:20161030200717j:plain

こんにちわ!

らすにゃです♪

 

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

 

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

 

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

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

 

 

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

 

 

ここで、便利なのが、

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

 

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

 

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

 

 

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

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

 

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

 

以上!らすにゃでした^^

f:id:lyukey0902:20161029143545p:plain

twitter.com